/* =====================================================================
   sam.css — the Study Area Map sheet
   =====================================================================
   The sheet is a real paper size on screen, so what you compose is what
   prints. Everything on it — neat-line, graticule labels, scale bar, north
   arrow, legend, locator — is positioned against the map frame rather than
   the page, because that is what keeps them aligned when the paper size or
   orientation changes.

   Deliberately quiet: one ink colour, one accent, hairline rules. A study
   area map is read, not admired, and every gram of chrome competes with the
   data it is supposed to be showing.
   ===================================================================== */

:root {
  --sam-ink:    #111111;
  --sam-ink-2:  #444444;
  --sam-ink-3:  #6B7280;
  --sam-line:   #C9CFD4;
  --sam-paper:  #FFFFFF;
  --sam-accent: #C1272D;
  /* ATL-20: 'Noto Sans Bengali' belongs in the Latin stack too, not only in
     --sam-bn. Every control in the panel is set with `font: … var(--sam-sans)`,
     and several of them carry mixed labels — the level picker reads
     "District · জেলা". With no Bangla family in this list the browser had to
     pick a fallback for the Bangla half on its own, and on Windows it lands on
     a symbol font: the dropdown rendered as rows of dingbats while the closed
     select, showing only the Latin half, looked perfectly fine. Naming the
     font here fixes every mixed label in one place; --sam-bn stays for the
     runs that are Bangla only and want the Bangla face first. */
  --sam-sans:   'Inter', 'Noto Sans Bengali', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* ATL-18: the last three are installed locally on Windows, macOS and most
     Bangladeshi machines, so a blocked Google Fonts does not turn a Bangla
     sheet into tofu boxes. */
  --sam-bn:     'Noto Sans Bengali', 'Hind Siliguri', 'SolaimanLipi', 'Kalpurush',
                'Nirmala UI', 'Shonar Bangla', 'Bangla MN', sans-serif;
}

/* ---------- the sheet ------------------------------------------------- */
.sam-sheet {
  position: relative;
  isolation: isolate;            /* the watermark stays above the map but never above the page chrome */
  background: var(--sam-paper);
  color: var(--sam-ink);
  font-family: var(--sam-sans);
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  box-shadow: 0 1px 3px rgba(17, 17, 17, .12), 0 8px 28px rgba(17, 17, 17, .10);
  padding: 12mm;
  box-sizing: border-box;
  overflow: hidden;
}
.sam-sheet:lang(bn), .sam-sheet.bn { font-family: var(--sam-bn); }

/* real paper, at 96 CSS dpi */
.sam-sheet.a4.portrait  { width: 210mm; height: 297mm; }
.sam-sheet.a4.landscape { width: 297mm; height: 210mm; }
.sam-sheet.a3.portrait  { width: 297mm; height: 420mm; }
.sam-sheet.a3.landscape { width: 420mm; height: 297mm; }

/* ---------- title block ------------------------------------------------ */
.sam-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 4mm;
  padding-bottom: 5mm;
  margin-bottom: 4mm;
  border-bottom: 1.5px solid var(--sam-ink);
}
.sam-head-text { flex: 1 1 auto; text-align: center; min-width: 0; }
/* An institution logo, if one was supplied. Capped so a 2,000 px crest
   cannot push the map off the sheet. */
.sam-logo {
  flex: 0 0 auto;
  max-height: 16mm; max-width: 28mm;
  width: auto; height: auto;
  object-fit: contain;
}
.sam-title {
  font-size: 19px; font-weight: 700; line-height: 1.2;
  letter-spacing: -.01em; text-wrap: balance;
}
.sam-title[contenteditable="true"]:focus {
  outline: 2px solid var(--sam-accent); outline-offset: 3px; border-radius: 2px;
}
.sam-subtitle {
  font-size: 12px; font-weight: 400; color: var(--sam-ink-3);
  margin-top: 2mm; letter-spacing: .02em;
}

/* ---------- the map frame ---------------------------------------------- */
/* Everything cartographic hangs off this box. The neat-line is its border,
   so the graticule labels, scale bar and locator all sit against the same
   rectangle no matter what paper size is chosen. */
.sam-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--sam-ink);
  background: var(--sam-paper);
}
.sam-sheet.no-neatline .sam-frame { border-color: transparent; }
.sam-map { position: absolute; inset: 0; background: var(--sam-paper); }
.sam-map .leaflet-container { background: var(--sam-paper); font-family: inherit; }

/* ---------- graticule edge labels --------------------------------------- */
.sam-grid-labels { position: absolute; inset: 0; pointer-events: none; }
.sam-gl {
  position: absolute;
  font-size: 8px; font-variant-numeric: tabular-nums;
  color: var(--sam-ink-2); background: var(--sam-paper);
  padding: 0 2px; white-space: nowrap;
}
.sam-gl-top    { top: 1px;    transform: translateX(-50%); }
.sam-gl-bottom { bottom: 1px; transform: translateX(-50%); }
.sam-gl-left   { left: 1px;   transform: translateY(-50%); }
.sam-gl-right  { right: 1px;  transform: translateY(-50%); }

/* ---------- north arrow -------------------------------------------------- */
.sam-north {
  position: absolute; top: 4mm; right: 4mm;
  background: rgba(255,255,255,.88); padding: 2px 4px; border-radius: 2px;
  line-height: 0; pointer-events: none;
}

/* ---------- scale bar ---------------------------------------------------- */
.sam-scale {
  position: absolute; left: 4mm; bottom: 4mm;
  background: rgba(255,255,255,.92);
  padding: 3px 6px 4px; border: 1px solid var(--sam-line); border-radius: 2px;
  pointer-events: none;
}
.sam-scale-bar { display: flex; height: 5px; border: 0.7px solid var(--sam-ink); }
.sam-scale-seg { flex: 1 1 0; background: var(--sam-paper); }
.sam-scale-seg.alt { background: var(--sam-ink); }
.sam-scale-nums {
  display: flex; justify-content: space-between;
  font-size: 8px; color: var(--sam-ink-2); margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
.sam-scale-rf {
  font-size: 8px; color: var(--sam-ink-3); margin-top: 1px;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}

/* ---------- legend -------------------------------------------------------- */
.sam-legend {
  position: absolute; left: 4mm; top: 4mm;
  max-width: 62mm; max-height: calc(100% - 26mm);
  overflow: hidden;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--sam-line); border-radius: 2px;
  padding: 5px 7px 6px;
  pointer-events: none;
}
.sam-legend-h {
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sam-ink);
  padding-bottom: 3px; margin-bottom: 4px;
  border-bottom: 0.7px solid var(--sam-line);
}
.sam-legend-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 8.5px; line-height: 1.5; color: var(--sam-ink-2);
}
.sam-sw {
  flex: 0 0 22px; display: inline-flex; align-items: center;
  justify-content: center; line-height: 0;
}

/* ---------- locator map ----------------------------------------------------
   Bottom right, always. A vertical sheet has the room there and a horizontal
   one keeps the reading order intact — the eye finishes on the locator. */
.sam-locator {
  position: absolute; right: 4mm; bottom: 4mm;
  width: 38mm;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--sam-line); border-radius: 2px;
  padding: 3px;
}
.sam-loc-map {
  width: 100%; aspect-ratio: 1 / 1;
  background: var(--sam-paper);
}
.sam-loc-map .leaflet-container { background: var(--sam-paper); }
.sam-loc-cap {
  font-size: 7.5px; line-height: 1.35; color: var(--sam-ink-3);
  text-align: center; padding: 2px 1px 0;
}
.sam-sheet.a3 .sam-locator { width: 50mm; }

/* ---------- context labels ------------------------------------------------ */
.sam-ctx-label {
  font-size: 8px; color: var(--sam-ink-3);
  text-align: center; white-space: nowrap;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff;
  pointer-events: none;
}
/* Names of the units INSIDE the study area. Darker and heavier than the
   context labels, because these are the sheet's subject and those are not. */
.sam-sub-label {
  font-size: 8.5px; font-weight: 600; color: var(--sam-ink);
  text-align: center; white-space: nowrap;
  text-shadow: 0 0 2.5px #fff, 0 0 2.5px #fff, 0 0 2.5px #fff;
  pointer-events: none;
}
.sam-urban-label {
  font-size: 7.5px; font-style: italic; color: #6B4A68;
  text-align: center; white-space: nowrap;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff;
  pointer-events: none;
}
.sam-pt { background: none; border: 0; }

/* the choropleth's sub-heading inside the legend */
.sam-legend-h.sub { margin-top: 5px; }
.sam-legend-h.sub:first-child { margin-top: 0; }

/* ---------- figure caption ------------------------------------------------
   Below the map, where a thesis puts it. Only rendered when a figure number
   has actually been typed. */
.sam-caption {
  flex: 0 0 auto;
  font-size: 9.5px; font-weight: 600; color: var(--sam-ink);
  text-align: center;
  padding: 2mm 0 0;
}

/* ---------- credit -------------------------------------------------------- */
.sam-credit {
  flex: 0 0 auto;
  /* wraps, because a sheet that names its grid, its datum and its
     cartographer has more rows than a two-column strip can hold */
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 1mm 6mm;
  font-size: 8px; color: var(--sam-ink-3);
  padding-top: 3mm; margin-top: 3mm;
  border-top: 0.7px solid var(--sam-line);
}

/* ---------- watermark -----------------------------------------------------
   Free accounts get it, paid accounts do not. It is a diagonal repeat over
   the whole sheet so it survives a screenshot as well as an export, and it
   sits under nothing — pointer-events off, so it never blocks the map. */
.sam-watermark {
  position: absolute; inset: 0; z-index: 1200; pointer-events: none;
  overflow: hidden;
}
.sam-wm-inner {
  position: absolute; left: -60%; top: -60%; width: 220%; height: 220%;
  font: 700 14px/3.3 var(--sam-sans); letter-spacing: .22em;
  color: rgba(17, 17, 17, .2);
  user-select: none; -webkit-user-select: none;
  transform: rotate(-32deg);
  white-space: pre; text-align: center; overflow: hidden;
}

/* ---------- print ---------------------------------------------------------- */
@media print {
  .sam-sheet { box-shadow: none; margin: 0; }
  @page { size: A4 portrait; margin: 0; }
}

/* =====================================================================
   The control panel beside the sheet
   ===================================================================== */
.sam-wrap {
  display: grid;
  /* 18-Sep-2026: a 30 / 70 split — the controls get room to breathe and the
     sheet still has the larger half. Never narrower than 300 px, never wider
     than 460 px, so a wide screen gives the extra space to the map. */
  grid-template-columns: clamp(300px, 30%, 460px) minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - 72px);
  background: #EEF1F3;
}
.sam-panel {
  background: #fff;
  border-right: 1px solid var(--sam-line);
  padding: 16px 16px 40px;
  overflow-y: auto;
  max-height: calc(100vh - 72px);
  font-size: 13px;
}
.sam-stage {
  padding: 24px;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.sam-panel-head { border-bottom: 1px solid var(--sam-line); padding-bottom: 12px; margin-bottom: 14px; }
.sam-panel-head h1 { font-size: 16px; font-weight: 700; margin: 0 0 8px; line-height: 1.3; }
.sam-panel-head .bn { display: block; font-size: 12px; font-weight: 500; color: var(--sam-ink-3); font-family: var(--sam-bn); }

.sam-langsw { display: inline-flex; border: 1px solid var(--sam-line); border-radius: 3px; overflow: hidden; }
.sam-langsw button {
  border: 0; background: #fff; padding: 5px 12px; font: 500 12px/1 var(--sam-sans);
  color: var(--sam-ink-2); cursor: pointer;
}
.sam-langsw button[aria-pressed="true"] { background: var(--sam-ink); color: #fff; }
.sam-langsw button:focus-visible { outline: 2px solid var(--sam-accent); outline-offset: -2px; }

.sam-step { padding: 14px 0; border-bottom: 1px solid #EDF0F2; }
.sam-step:last-child { border-bottom: 0; }
.sam-step h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  margin: 0 0 10px; color: var(--sam-ink);
}
.sam-step h2 .n {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  background: var(--sam-ink); color: #fff;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0;
}
.sam-step h2 .bn {
  font-family: var(--sam-bn); font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--sam-ink-3); font-size: 11px;
}

.sam-f { display: block; margin-bottom: 10px; }
.sam-f > span { display: block; font-size: 11px; font-weight: 600; color: var(--sam-ink-2); margin-bottom: 4px; }
.sam-f > span i { font-family: var(--sam-bn); font-style: normal; font-weight: 400; color: var(--sam-ink-3); }
.sam-f select, .sam-f input[type="text"] {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--sam-line); border-radius: 3px;
  padding: 7px 8px; font: 13px/1.3 var(--sam-sans); color: var(--sam-ink);
  background: #fff;
}
.sam-f select:focus, .sam-f input:focus {
  outline: 2px solid var(--sam-accent); outline-offset: -1px; border-color: var(--sam-accent);
}
.sam-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.sam-group-h {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--sam-ink-3); margin: 12px 0 6px;
}
.sam-group-h i { font-family: var(--sam-bn); font-style: normal; text-transform: none; letter-spacing: 0; }

.sam-chk {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 4px 0; font-size: 12.5px; color: var(--sam-ink-2); cursor: pointer;
}
.sam-chk input { margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--sam-accent); }
.sam-chk i { font-family: var(--sam-bn); font-style: normal; color: var(--sam-ink-3); }
.sam-chk.sm { font-size: 11.5px; padding: 2px 0; }
.sam-chk .sw {
  flex: 0 0 auto; width: 14px; height: 3px; border-radius: 2px; margin-top: 8px;
}
.sam-sub { padding-left: 20px; margin: 2px 0 8px; border-left: 1px solid #EDF0F2; }

.sam-note {
  font-size: 11px; line-height: 1.5; color: var(--sam-ink-3);
  margin: 8px 0 0;
}
.sam-note .bn { display: block; font-family: var(--sam-bn); margin-top: 2px; }
.sam-note a { color: var(--sam-accent); }
.sam-wm-note {
  background: #FFF8E6; border: 1px solid #F0E0B0; border-radius: 3px;
  padding: 8px 9px; color: #7A5C10;
}

.sam-actions { display: flex; gap: 8px; }
.sam-actions .btn {
  flex: 1 1 0; border: 1px solid var(--sam-line); background: #fff;
  border-radius: 3px; padding: 9px 10px; cursor: pointer;
  font: 600 12.5px/1 var(--sam-sans); color: var(--sam-ink);
}
.sam-actions .btn.primary { background: var(--sam-ink); border-color: var(--sam-ink); color: #fff; }
.sam-actions .btn:disabled { opacity: .6; cursor: default; }
.sam-actions .btn:focus-visible { outline: 2px solid var(--sam-accent); outline-offset: 2px; }

/* a file input needs the same box as the text fields, or it sits half a
   line out from everything above it */
.sam-f input[type="file"] {
  display: block; width: 100%; font: 400 11.5px/1.4 var(--sam-sans);
  color: var(--sam-ink-2);
}
/* a district's villages are fetched on demand; say so while it happens */
.sam-f.loading > span::after {
  content: ' …'; color: var(--sam-accent); font-weight: 400;
}
.sam-f.loading select { opacity: .55; }

.sam-note.sm { font-size: 10.5px; }

/* a quiet note beside a layer that costs an extra request */
.sam-hint {
  font-style: normal; font-size: 9.5px; color: var(--sam-ink-3);
  border: 1px solid var(--sam-line); border-radius: 2px;
  padding: 0 3px; margin-left: 4px; white-space: nowrap;
}

/* a plain-text button that reads as a link, for a destructive-free action
   sitting inside a paragraph */
.linkish {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--sam-accent); text-decoration: underline;
}
.linkish:focus-visible { outline: 2px solid var(--sam-accent); outline-offset: 2px; }

@media (max-width: 900px) {
  .sam-wrap { grid-template-columns: minmax(0, 1fr); }
  .sam-panel { max-height: none; border-right: 0; border-bottom: 1px solid var(--sam-line); }
  .sam-stage { padding: 14px; }
  .sam-sheet { transform-origin: top center; }
}
@media print {
  .sam-panel, .topbar, .sitefoot { display: none !important; }
  .sam-wrap { display: block; background: #fff; }
  .sam-stage { padding: 0; }
}

/* The native <select> popup on Windows cannot use a webfont — see the long
   note in atlas/assets/css/style.css. Naming Inter first made Windows
   substitute a symbol face and draw plain ASCII option text as dingbats.
   Local fonts only here, Bangla included. */
/* ATL-29: the control as well as its options — Windows picks the popup's
   face from the <select>, so leaving that on Inter kept the substitution
   happening before the option rule was ever reached. */
select,
select option,
select optgroup,
.sam-f select {
  font-family: 'Segoe UI', system-ui, -apple-system, 'Nirmala UI',
               'Noto Sans Bengali', 'Hind Siliguri', 'SolaimanLipi',
               'Kalpurush', Roboto, Arial, sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ATL-25 · More than one study area
   ═══════════════════════════════════════════════════════════════════
   The picker above chooses one area; this is the list the sheet is
   actually made of. It is hidden until something is added, so a
   single-area sheet — still the common case — sees no extra furniture.
   ------------------------------------------------------------------ */
.sam-addarea {
  display: block; width: 100%; margin: -4px 0 10px;
  padding: 6px 8px;
  font: 600 11.5px/1.4 var(--sam-sans);
  color: var(--sam-accent);
  background: #fff;
  border: 1px dashed var(--sam-line); border-radius: 3px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.sam-addarea:hover { border-color: var(--sam-accent); background: #fff8f8; }

.sam-picked { margin: 0 0 12px; }
.sam-picked[hidden] { display: none; }

.sam-picked-h {
  display: flex; align-items: baseline; gap: 8px;
  font: 600 11px/1.5 var(--sam-sans);
  color: var(--sam-ink-2);
  margin-bottom: 5px;
}
.sam-picked-h span { flex: 1; }
.sam-picked-clear {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: 500 11px var(--sam-sans); color: var(--sam-ink-3);
  text-decoration: underline;
}
.sam-picked-clear:hover { color: var(--sam-accent); }

.sam-picked-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.sam-picked-list li {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 4px 3px 9px;
  font: 500 11.5px/1.5 var(--sam-sans); color: var(--sam-ink);
  background: #fff; border: 1px solid var(--sam-line); border-radius: 99px;
}
.sam-picked-list button {
  border: 0; background: none; cursor: pointer; padding: 0 3px;
  font-size: 14px; line-height: 1; color: var(--sam-ink-3);
}
.sam-picked-list button:hover { color: var(--sam-accent); }

/* ═══════════════════════════════════════════════════════════════════
   ATL-27 · Bring your own data
   ═══════════════════════════════════════════════════════════════════ */
.sam-upload { margin: 0 0 12px; }

.sam-upload-btn {
  display: block; text-align: center; cursor: pointer;
  padding: 8px; margin-bottom: 6px;
  font: 600 11.5px/1.4 var(--sam-sans); color: var(--sam-ink-2);
  background: #fff; border: 1px dashed var(--sam-line); border-radius: 3px;
  transition: border-color .15s ease, color .15s ease;
}
.sam-upload-btn:hover { border-color: var(--sam-accent); color: var(--sam-accent); }

.sam-upload-hint { font: 400 10.5px/1.5 var(--sam-sans); color: var(--sam-ink-3); }
/* a rejected file says why, in the colour of a problem */
.sam-upload-hint.is-bad { color: var(--sam-accent); font-weight: 600; }

.sam-upload-list { list-style: none; margin: 7px 0 0; padding: 0; display: grid; gap: 4px; }
.sam-upload-list li {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 4px 4px 7px;
  font: 500 11.5px/1.5 var(--sam-sans); color: var(--sam-ink);
  background: #fff; border: 1px solid var(--sam-line); border-radius: 3px;
}
.sam-upload-list i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.sam-upload-list span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sam-upload-list em { font-style: normal; font-size: 10px; color: var(--sam-ink-3); }
.sam-upload-list button {
  border: 0; background: none; cursor: pointer; padding: 0 3px;
  font-size: 14px; line-height: 1; color: var(--sam-ink-3);
}
.sam-upload-list button:hover { color: var(--sam-accent); }

/* ═══════════════════════════════════════════════════════════════════
   15-Sep-2026 · fixes and the download flow
   ═══════════════════════════════════════════════════════════════════ */
/* `.sam-f { display:block }` beat the `hidden` attribute, so the upazila,
   union and village pickers showed — empty — on a district sheet. */
.sam-f[hidden], .sam-step [hidden] { display: none !important; }

.sam-addarea i { font-family: var(--sam-bn); font-style: normal; font-weight: 400; }
.sam-upload-list input[type="color"] { width: 18px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; flex: none; }

/* the sheet is real paper size (A0 is 841 mm); the stage shows it fitted */
.sam-stage { position: relative; flex-direction: column; align-items: center; }
.sam-zoombox { position: relative; flex: none; }
.sam-zoombox > .sam-sheet { transform-origin: 0 0; position: absolute; top: 0; left: 0; margin: 0; }
.sam-zoomctl {
  position: sticky; top: 0; z-index: 40; align-self: stretch;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin: 0 0 12px;
  font: 600 11px/1 var(--sam-sans);
}
.sam-zg { display: inline-flex; align-items: center; gap: 2px; background: #fff; border: 1px solid var(--sam-line); border-radius: 6px; padding: 3px; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.sam-zoomctl button.is-on { background: var(--sam-ink); color: #fff; border-radius: 4px; }
/* the stage stays in view while the controls scroll: the whole sheet at a glance */
@media (min-width: 901px) {
  .sam-wrap { align-items: start; }
  .sam-stage { position: sticky; top: 72px; height: calc(100vh - 72px); box-sizing: border-box; overflow: auto; padding: 16px 20px; }
}
.sam-upload-list button[data-zoomlayer] { font-size: 14px; }
.sam-zoomctl button { border: 0; background: none; cursor: pointer; padding: 5px 7px; color: var(--sam-ink-2); font: inherit; }
.sam-zoomctl button:hover { color: var(--sam-accent); }
.sam-zoomctl output { padding: 5px 4px; color: var(--sam-ink-3); min-width: 36px; text-align: center; }

.sam-acct { margin-top: 10px; }
.sam-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 8px 0 10px; }
.sam-prices div, .sam-prices a { display: block; border: 1px solid var(--sam-line); border-radius: 3px; padding: 5px 7px; background: #fff; text-decoration: none; }
.sam-prices a:hover { border-color: var(--sam-accent); }
.sam-prices b { display: block; font-size: 12px; color: var(--sam-ink); }
.sam-prices span { font-size: 10.5px; color: var(--sam-ink-3); }
#samJpg, #samPng, #samPdf { flex: 1; }

.sam-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(15, 23, 42, .55);
  display: grid; place-items: center; padding: 18px; }
.sam-modal[hidden] { display: none; }
.sam-modal-card { position: relative; background: #fff; border-radius: 12px; max-width: 460px; width: 100%;
  padding: 22px 22px 18px; box-shadow: 0 20px 60px -20px rgba(0,0,0,.5); font: 400 14px/1.55 var(--sam-sans); }
.sam-modal-card h3 { margin: 0 0 6px; font-size: 17px; }
.sam-modal-card p { margin: 0 0 14px; color: #475569; }
.sam-modal-x { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 22px; cursor: pointer; color: #64748b; }
.sam-modal-actions { display: grid; gap: 8px; }
.sam-modal-actions a, .sam-modal-actions button {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--sam-line); background: #fff;
  font: 600 13px/1.3 var(--sam-sans); color: var(--sam-ink); text-decoration: none; cursor: pointer; text-align: left;
}
.sam-modal-actions a:hover, .sam-modal-actions button:hover { border-color: var(--sam-accent); }
.sam-modal-actions .is-main { background: var(--sam-accent); border-color: var(--sam-accent); color: #fff; }
.sam-modal-actions small { font-weight: 500; opacity: .8; }

/* ═══════════════════════════════════════════════════════════════════
   15-Sep-2026 · LGED sheet arrangement
   ───────────────────────────────────────────────────────────────────
   Landscape  │ map │ LEGEND · index map · info │   (legend down the right)
   Portrait   │ map                             │
              │ LEGEND (columns) │ index · info │   (everything across the foot)
   Grid values sit in the margin between the outer frame and the neat-line;
   longitude reads across top and bottom, latitude runs vertically up the
   left and right sides. Lettering grows with the paper (--k).
   ═══════════════════════════════════════════════════════════════════ */
.sam-sheet { --k: 1; padding: 8mm; }
.sam-sheet.a5 { --k: .78; padding: 6mm; }
.sam-sheet.a3 { --k: 1.3; padding: 10mm; }
.sam-sheet.a2 { --k: 1.75; padding: 13mm; }
.sam-sheet.a1 { --k: 2.35; padding: 17mm; }
.sam-sheet.a0 { --k: 3.2; padding: 22mm; }

.sam-body {
  flex: 1 1 auto; min-height: 0;
  display: grid; gap: calc(3mm * var(--k));
  border: calc(1.4px * var(--k)) solid var(--sam-ink);
  padding: calc(2.5mm * var(--k));
}
.sam-sheet.landscape .sam-body { grid-template-columns: minmax(0, 1fr) calc(24% + 4mm); grid-template-rows: minmax(0, 1fr); }
.sam-sheet.portrait  .sam-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.sam-sheet.no-side .sam-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.sam-sheet.no-side .sam-side { display: none; }

/* the neat-line, with a margin outside it for the grid values */
.sam-frame { margin: calc(5.5mm * var(--k)); border: calc(1px * var(--k)) solid var(--sam-ink); }
.sam-sheet.no-neatline .sam-frame { border-color: transparent; }
.sam-grid-labels { overflow: visible; }
.sam-gl { font-size: calc(7.5px * var(--k)); background: transparent; padding: 0; color: var(--sam-ink); }
.sam-gl-top    { top: auto; bottom: calc(100% + 1.2mm * var(--k)); transform: translateX(-50%); }
.sam-gl-bottom { bottom: auto; top: calc(100% + 1.2mm * var(--k)); transform: translateX(-50%); }
.sam-gl-left   { left: calc(-1.2mm * var(--k)); transform-origin: 0 0; transform: rotate(-90deg) translate(-50%, -100%); }
.sam-gl-right  { right: auto; left: calc(100% + 1.2mm * var(--k)); transform-origin: 0 0; transform: rotate(-90deg) translate(-50%, 0); }

/* 15-Sep-2026 · the key box: title block, north arrow + scale, LEGEND.
   Nothing of this sits on the map any more. */
.sam-keybox {
  border: calc(1px * var(--k)) solid var(--sam-ink); background: #fff;
  display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; overflow: hidden;
}
.sam-keybox[hidden] { display: none; }
.sam-keytop {
  display: flex; align-items: center; justify-content: space-between; gap: calc(4mm * var(--k));
  padding: calc(2.5mm * var(--k)) calc(3mm * var(--k));
  border-bottom: calc(1px * var(--k)) solid var(--sam-ink);
}
.sam-keytop[hidden] { display: none; }
.sam-head { position: static; display: block; max-width: none; margin: 0; padding: 0; border: 0; text-align: left; min-width: 0; flex: 1 1 auto; }
.sam-head[hidden] { display: none; }
.sam-subtitle { font-size: calc(10px * var(--k)); font-weight: 600; margin: 0; color: var(--sam-ink-2); text-transform: uppercase; letter-spacing: .08em; }
.sam-title { font-size: calc(17px * var(--k)); font-weight: 800; line-height: 1.12; text-transform: uppercase; letter-spacing: .01em; margin-top: calc(1px * var(--k)); overflow-wrap: anywhere; }
.sam-sheet.bn .sam-title, .sam-sheet.bn .sam-subtitle, .sam-sheet.bn .sam-parentline { text-transform: none; letter-spacing: 0; }
.sam-parentline { font-size: calc(10px * var(--k)); font-weight: 600; text-transform: uppercase; margin-top: calc(1.5px * var(--k)); color: var(--sam-ink-2); letter-spacing: .04em; }

/* north arrow beside the scale bar */
.sam-ns { position: static; display: flex; flex-direction: row; align-items: flex-end; gap: calc(3mm * var(--k)); flex: 0 0 auto; pointer-events: none; }
.sam-ns[hidden] { display: none; }
.sam-ns .sam-north, .sam-ns .sam-scale { position: static; }
.sam-north { background: transparent; padding: 0; line-height: 0; }
.sam-north[hidden], .sam-scale[hidden] { display: none; }
.sam-north svg { width: calc(22px * var(--k)); height: auto; }
.sam-scale { background: transparent; border: 0; padding: 0; transform: none; }
.sam-scale .sam-scale-h { font-size: calc(7.5px * var(--k)); letter-spacing: .14em; margin-bottom: calc(1.5px * var(--k)); text-align: left; }
.sam-scale .sam-scale-bar { height: calc(4px * var(--k)); border-width: calc(.7px * var(--k)); box-sizing: border-box; }
.sam-scale .sam-scale-nums { display: flex; justify-content: space-between; font-size: calc(7px * var(--k)); margin-top: calc(1px * var(--k)); }
.sam-scale .sam-scale-rf { font-size: calc(7px * var(--k)); color: var(--sam-ink-2); margin-top: calc(1px * var(--k)); }

/* the legend inside the key box has no frame of its own */
.sam-keybox .sam-legend { border: 0 !important; flex: 1 1 auto; }
.sam-keybox .sam-legend-title { border-top: 0; }

/* landscape: one column, title over north/scale */
.sam-sheet.landscape .sam-keytop { flex-direction: column; align-items: stretch; gap: calc(2.5mm * var(--k)); }
.sam-sheet.landscape .sam-head { text-align: center; }
.sam-sheet.landscape .sam-ns { justify-content: space-between; }

/* labels inside the map: centred on their point, moved by the declutter pass */
.sam-sub-label, .sam-urban-label, .sam-ctx-label { width: 0 !important; height: 0 !important; overflow: visible; }
.sam-lbl { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; display: block; line-height: 1.1; }

/* names of the neighbouring units, in the map around the study area */
.sam-nbrs { position: absolute; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; }
.sam-nbr { position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  font-size: calc(9.5px * var(--k)); font-weight: 700; color: #1f2937; letter-spacing: .02em;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }

/* the side panel */
.sam-side { display: flex; flex-direction: column; gap: calc(2.5mm * var(--k)); min-height: 0; font-size: calc(8px * var(--k)); }
.sam-keybox, .sam-legend, .sam-locator, .sam-credit { position: static; max-width: none; max-height: none; border-radius: 0; background: #fff; }
.sam-legend { border: calc(1px * var(--k)) solid var(--sam-ink); padding: 0; overflow: hidden; flex: 1 1 auto; min-height: 0; }
.sam-legend-title {
  text-align: center; font-weight: 800; letter-spacing: .32em; font-size: calc(12px * var(--k));
  padding: calc(2mm * var(--k)) 0; border-bottom: calc(1px * var(--k)) solid var(--sam-ink); text-transform: uppercase;
}
.sam-sheet.bn .sam-legend-title { letter-spacing: .05em; }
.sam-legend-cols { padding: calc(2mm * var(--k)) calc(2.5mm * var(--k)); }
.sam-lg-group { break-inside: avoid; margin-bottom: calc(2mm * var(--k)); }
.sam-legend-h { font-size: calc(8.5px * var(--k)); font-weight: 700; letter-spacing: 0; text-transform: none; border: 0; padding: 0; margin: 0 0 calc(1mm * var(--k)); }
.sam-legend-row { font-size: calc(7.5px * var(--k)); line-height: 1.45; gap: calc(5px * var(--k)); }
.sam-sw { flex: 0 0 calc(22px * var(--k)); }
.sam-sw svg { width: calc(20px * var(--k)); height: auto; max-height: calc(10px * var(--k)); }
.sam-locator { border: calc(1px * var(--k)) solid var(--sam-ink); padding: calc(1.5mm * var(--k)); width: auto; flex: 0 0 auto; }
.sam-loc-cap { font-size: calc(7.5px * var(--k)); }
.sam-credit { display: flex; gap: calc(2mm * var(--k)); align-items: center; border: calc(1px * var(--k)) solid var(--sam-ink); padding: calc(2mm * var(--k)); margin: 0; flex: 0 0 auto; }
.sam-info { flex: 1; display: grid; gap: calc(1mm * var(--k)); }
.sam-info-row { font-size: calc(7px * var(--k)); line-height: 1.35; color: var(--sam-ink-2); }
.sam-info-row b { color: var(--sam-ink); }
.sam-credit .sam-logo { max-height: calc(14mm * var(--k)); max-width: calc(20mm * var(--k)); object-fit: contain; }
.sam-credit .sam-logo[hidden] { display: none; }
.sam-caption { font-size: calc(9.5px * var(--k)); }

/* landscape: legend fills the column, index map square below it */
.sam-sheet.landscape .sam-loc-map { aspect-ratio: 4 / 3; }
/* portrait: LEGEND in columns across the foot, index map and info on its right */
.sam-sheet.portrait .sam-side {
  display: grid; grid-template-columns: minmax(0, 1fr) 30%; grid-template-rows: auto auto;
  column-gap: calc(2.5mm * var(--k)); row-gap: calc(2.5mm * var(--k));
}
.sam-sheet.portrait .sam-keybox { grid-column: 1; grid-row: 1 / span 2; }
/* 15-Sep-2026: as many columns as the width holds; a long list flows on into
   the next column instead of running out of the box */
.sam-sheet.portrait .sam-legend-cols { columns: auto calc(34mm * var(--k)); column-gap: calc(4mm * var(--k)); column-fill: balance; }
.sam-legend.is-dense .sam-legend-cols { column-width: calc(27mm * var(--k)); }
.sam-sheet.portrait .sam-locator { grid-column: 2; grid-row: 1; }
.sam-sheet.portrait .sam-loc-map { aspect-ratio: 16 / 10; }
.sam-sheet.portrait .sam-credit { grid-column: 2; grid-row: 2; }
.sam-sheet.landscape .sam-legend-cols { columns: 1; }
.sam-sheet.landscape .sam-legend.is-dense .sam-legend-cols { columns: 2; column-gap: calc(3mm * var(--k)); }
.sam-lg-group.is-long { break-inside: auto; }
.sam-legend-h { break-after: avoid; }
.sam-legend-row { break-inside: avoid; }
.sam-legend.is-dense .sam-legend-row { font-size: calc(6.6px * var(--k)); line-height: 1.3; }
.sam-legend.is-dense .sam-legend-h { font-size: calc(7.6px * var(--k)); }
.sam-legend.is-denser .sam-legend-row { font-size: calc(5.9px * var(--k)); line-height: 1.22; }
.sam-legend.is-denser .sam-sw { flex-basis: calc(16px * var(--k)); }
.sam-legend.is-denser .sam-legend-cols { column-width: calc(23mm * var(--k)); }
.sam-legend[hidden], .sam-locator[hidden] { display: none; }
.sam-sheet.portrait .sam-keybox[hidden] ~ .sam-locator { grid-column: 1; }

/* the sub-area and urban labels grow with the paper too */
.sam-sheet .sam-sub-label { font-size: calc(8.5px * var(--k)); }
.sam-sheet .sam-urban-label { font-size: calc(7.5px * var(--k)); }
.sam-sheet .sam-ctx-label { font-size: calc(8px * var(--k)); }

.sam-scale-h { font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-align: center; margin-bottom: 2px; }

/* =====================================================================
   15-Sep-2026 · GIS Map Atlas — one engine, several map types
   ===================================================================== */
/* names of the places around the study area are context, not content */
.sam-nbr { opacity: .55; }
.sam-sheet.out-show .sam-nbr { opacity: .8; }
.sam-sheet .sam-sub-label.lvl2 { font-size: calc(6.8px * var(--k)); font-weight: 500; color: #374151; }
.sam-sheet .sam-sub-label.val { font-size: calc(8.5px * var(--k)); font-weight: 800; color: #111827; }
.sam-legend-row.note { font-size: calc(6.5px * var(--k)); color: var(--sam-ink-3); line-height: 1.3; }

/* Explore: the map fills the stage; the legend floats over it */
.sam-sheet.mode-explore { padding: 0; box-shadow: 0 1px 3px rgba(15,23,42,.12); border-radius: 10px; overflow: hidden; }
.sam-sheet.mode-explore .sam-body { display: block; position: relative; height: 100%; border: 0; padding: 0; }
.sam-sheet.mode-explore .sam-frame { margin: 0; border: 0; height: 100%; }
.sam-sheet.mode-explore .sam-grid-labels { display: none; }
.sam-sheet.mode-explore .sam-side {
  position: absolute; right: 10px; top: 10px; z-index: 900; width: 250px; max-height: calc(100% - 90px);
  display: flex; background: transparent; pointer-events: auto;
}
.sam-sheet.mode-explore .sam-keybox { border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 4px 16px rgba(15,23,42,.12); overflow: auto; }
.sam-sheet.mode-explore .sam-keytop { border-bottom: 1px solid #e2e8f0; padding: 8px 10px; }
.sam-sheet.mode-explore .sam-keytop .sam-head { display: none; }
.sam-sheet.mode-explore .sam-locator, .sam-sheet.mode-explore .sam-credit { display: none !important; }
.sam-sheet.mode-explore .sam-legend-title { font-size: 10px; padding: 6px 0; }
.sam-sheet.mode-explore .sam-legend-cols { columns: 1 !important; }
.sam-sheet.mode-explore.no-legend .sam-side { display: none; }
.sam-sheet.mode-explore .leaflet-control-zoom { margin: 0 10px 10px 0; }

/* presentation slide: a bold title */
.sam-sheet.mode-presentation .sam-title { font-size: calc(22px * var(--k)); }

/* popups (Explore) */
.sam-pop { font: 12.5px/1.45 var(--sam-sans, system-ui); min-width: 200px; }
.sam-pop strong { display: block; font-size: 13.5px; color: #0f172a; margin-bottom: 3px; }
.sam-pop-bn { color: #475569; margin-bottom: 4px; }
.sam-pop table { border-collapse: collapse; width: 100%; }
.sam-pop th { text-align: left; font-weight: 600; color: #64748b; padding: 2px 8px 2px 0; white-space: nowrap; vertical-align: top; }
.sam-pop td { padding: 2px 0; color: #0f172a; }

/* ---------- Map Studio panel --------------------------------------------- */
.sam-panel { padding: 16px 18px 48px; background: linear-gradient(180deg, #FBFCFE, #F6F8FB 240px, #FBFCFD 100%); }
.sam-brand-mark { vertical-align: -4px; margin-right: 7px; }
.sam-panel-head h1 { display: flex; align-items: center; letter-spacing: -.01em; }
.sam-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sam-panel-head h1 { margin: 0; font-size: 16px; }
.sam-panel-head h1 .bn { display: block; }
.gma-types { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 12px 0 10px; }
.gma-types button {
  text-align: left; border: 1px solid var(--sam-line); background: #fff; border-radius: 8px;
  padding: 8px 9px; cursor: pointer; font: inherit; color: var(--sam-ink); line-height: 1.25;
  transition: border-color .12s, box-shadow .12s;
}
.gma-types button:first-child { grid-column: 1 / -1; }
.gma-types button b { display: block; font-size: 12.5px; }
.gma-types button span { display: block; font-size: 10.5px; color: var(--sam-ink-3); margin-top: 2px; }
.gma-types button:hover { border-color: #94a3b8; }
.gma-types button.is-on { border-color: var(--sam-ink); box-shadow: inset 0 0 0 1px var(--sam-ink); background: #F8FAFC; }
.gma-types button:focus-visible { outline: 2px solid var(--sam-accent); outline-offset: 1px; }

.gma-sec { border: 1px solid var(--sam-line); border-radius: 8px; background: #fff; margin-bottom: 8px; }
.gma-sec[hidden] { display: none; }
.gma-sec > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; font-size: 13px; font-weight: 700; color: var(--sam-ink); user-select: none;
}
.gma-sec > summary::-webkit-details-marker { display: none; }
.gma-sec > summary::after { content: '▾'; margin-left: 6px; color: var(--sam-ink-3); transition: transform .15s; }
.gma-sec:not([open]) > summary::after { transform: rotate(-90deg); }
.gma-sec > summary .n { width: 20px; height: 20px; border-radius: 50%; background: var(--sam-ink); color: #fff; font-size: 11px; display: inline-grid; place-items: center; flex: none; }
.gma-sec > summary i { font-family: var(--sam-bn); font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--sam-ink-3); }
.gma-sec > summary em { margin-left: auto; font-style: normal; font-weight: 500; font-size: 11px; color: var(--sam-ink-3); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gma-body { padding: 0 12px 12px; }
.gma-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.gma-tools input[type="search"] { flex: 1; min-width: 0; border: 1px solid var(--sam-line); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 12px; }
.gma-grp { margin-top: 6px; }
.gma-grp .sam-chk[hidden] { display: none; }
.gma-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.gma-sym { display: inline-flex; width: 12px; justify-content: center; align-items: center; flex: none; margin-top: 2px; }
body.gma-explore .sam-zoomctl .sam-zg:first-child { visibility: hidden; }
body.gma-explore .sam-stage { align-items: stretch; }

/* a portrait key box needs room even when the index map is off (country sheet) */
.sam-sheet.portrait .sam-side { min-height: 21%; }

.gma-swatch { display: flex; height: 10px; border-radius: 3px; overflow: hidden; margin: -4px 0 10px; border: 1px solid var(--sam-line); }
.gma-swatch i { flex: 1; }

/* ---- 15-Sep-2026: team project bar (sam-team.js) ---- */
.gma-team{margin:0 0 12px;padding:10px 12px;border:1px solid #d1fae5;background:linear-gradient(180deg,#f0fdf4,#fff);border-radius:12px;display:grid;gap:7px;font-size:13px}
.gma-team-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gma-team-ic{font-size:15px}
.gma-team-t{flex:1;color:#334155;font-weight:600}
.gma-team-p{font-weight:800;color:#065f46;text-decoration:none;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gma-team-role{font-size:11px;font-weight:800;text-transform:capitalize;background:#0f172a;color:#fff;border-radius:99px;padding:1px 8px}
.gma-team-title{flex:1;min-width:120px;padding:6px 8px;border:1px solid #cbd5e1;border-radius:8px;font:inherit;font-size:13px}
.gma-team-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:8px;border:1px solid #0b7a3b;background:#fff;color:#0b7a3b;font-weight:700;font-size:12.5px;cursor:pointer;text-decoration:none}
.gma-team-btn.is-main{background:#0b7a3b;color:#fff}
.gma-team-btn.is-warn{border-color:#b45309;color:#b45309}
.gma-team-btn:disabled{opacity:.6;cursor:default}
.gma-team-x{margin-left:auto;border:0;background:none;font-size:18px;cursor:pointer;color:#64748b}
.gma-team-status{color:#64748b;font-size:12px;line-height:1.45}
.gma-team-status.is-err{color:#b91c1c}
.gma-team-status.is-warn{color:#92400e;background:#fef3c7;border-radius:8px;padding:7px 8px}
.gma-team-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.gma-team-pick{display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:9px;background:#fff;cursor:pointer;font:inherit}
.gma-team-pick:hover{border-color:#0b7a3b}
.gma-team-pick span{font-size:11.5px;color:#64748b}

/* ---- 15-Sep-2026: start from your data + the detection card ---- */
.gma-fromdata{display:block;cursor:pointer;margin:0 0 12px;padding:10px 12px;border:1.5px dashed #0b7a3b;border-radius:10px;background:#f0fdf4;font-size:12.5px;line-height:1.4}
.gma-fromdata:hover{background:#dcfce7}
.gma-fromdata b{display:block;font-size:13.5px;color:#065f46;margin-bottom:2px}
.gma-fromdata span{color:#334155}
.gma-fromdata .bn{display:block;font-style:normal;color:#64748b}
.gma-detect{margin:10px 0;padding:10px 11px;border:1px solid #bbf7d0;border-radius:10px;background:#fff;font-size:12.5px;display:grid;gap:7px}
.gma-detect-h{font-weight:800;font-size:13px;color:#065f46}
.gma-detect-h.sub{font-size:12px;color:#334155;margin-top:2px}
.gma-detect-row span{font-weight:700}
.gma-detect-sub{color:#64748b;font-size:11.5px}
.gma-detect-sub code{font-size:11px;background:#f1f5f9;padding:0 3px;border-radius:3px}
.gma-detect-warn{color:#92400e;background:#fef3c7;border-radius:7px;padding:6px 8px}
.gma-detect-cover{color:#334155}
.gma-detect-cover i{font-style:normal;color:#64748b;font-size:11px}
.gma-detect-opts{display:grid;gap:5px}
.gma-detect-opt{text-align:left;border:1px solid #e2e8f0;border-radius:8px;background:#fff;padding:6px 9px;cursor:pointer;font:inherit}
.gma-detect-opt b{display:block;font-size:12.5px}
.gma-detect-opt span{font-size:11.5px;color:#64748b}
.gma-detect-opt.is-on{border-color:#0b7a3b;background:#f0fdf4;box-shadow:inset 3px 0 0 #0b7a3b}
.gma-detect-acts{display:flex;gap:6px;flex-wrap:wrap}
.gma-detect-acts button{font:inherit;font-size:12px;border:1px solid #cbd5e1;background:#fff;border-radius:7px;padding:4px 8px;cursor:pointer}

/* ---- 15-Sep-2026: multi-panel sheets (several areas far apart) ---- */
.sam-panels { position: absolute; inset: 0; z-index: 900; background: var(--sam-paper, #fff); display: grid;
  gap: calc(3mm * var(--k)); padding: 0; }
.sam-sheet.has-panels .sam-grid-labels, .sam-sheet.has-panels .sam-nbrs { display: none; }
.sam-sheet.has-panels .sam-frame { border-color: transparent; }
.sam-sheet.has-panels .sam-ns .sam-scale { display: none; }
.sam-panels.shape-row { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); }
.sam-panels.shape-col { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 1fr; }
.sam-panels.shape-three { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: minmax(0, 1fr); }
.sam-panels.shape-three.is-portrait { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 1fr 1fr; }
.sam-panels.shape-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); }
.sam-panels.shape-grid.n2 { grid-template-rows: minmax(0, 1fr); }
.sam-panels.shape-grid.n3, .sam-panels.shape-grid.n4 { grid-template-rows: 1fr 1fr; }
.sam-panels.shape-grid.n5, .sam-panels.shape-grid.n6 { grid-template-rows: 1fr 1fr 1fr; }
.sam-panels.shape-one2 { grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; }
.sam-panels.shape-one2 > .sam-pcell:first-child { grid-row: 1 / span 2; }
.sam-panels.shape-one2.is-portrait { grid-template-columns: 1fr 1fr; grid-template-rows: 1.35fr 1fr; }
.sam-panels.shape-one2.is-portrait > .sam-pcell:first-child { grid-row: auto; grid-column: 1 / span 2; }
.sam-panels.shape-one2 > .sam-pcell:nth-child(n+4) { display: none; }
.sam-pcell { position: relative; min-width: 0; min-height: 0; border: calc(1px * var(--k)) solid var(--sam-ink, #111); display: flex; flex-direction: column; }
.sam-phost { position: relative; flex: 1 1 auto; min-height: 0; }
.sam-psheet { position: absolute; inset: 0; }
.sam-pframe { position: absolute !important; inset: 0; margin: 0 !important; border: 0 !important; }
.sam-pcap { flex: none; border-top: calc(.6px * var(--k)) solid var(--sam-ink, #111); padding: calc(1.2mm * var(--k)) calc(2mm * var(--k));
  font-size: calc(9px * var(--k)); background: #fff; display: flex; align-items: center; gap: calc(1.5mm * var(--k)); }
.sam-pcap b { font-weight: 800; }
.sam-pchip { display: inline-block; width: calc(10px * var(--k)); height: calc(7px * var(--k)); border: .5px solid #555; }
.sam-pscale { position: absolute; left: calc(2mm * var(--k)); bottom: calc(2mm * var(--k)); z-index: 800; background: rgba(255,255,255,.85);
  padding: calc(.8mm * var(--k)) calc(1.2mm * var(--k)); transform-origin: 0 100%; }
.sam-pscale .sam-scale-h { display: none; }

/* ---- 15-Sep-2026: river names ---- */
.sam-river-label { width: 0 !important; height: 0 !important; overflow: visible; }
.sam-rlbl { position: absolute; left: 0; top: 0; white-space: nowrap; font-style: italic; font-weight: 600; letter-spacing: .06em;
  color: #0b5f86; font-size: calc(9px * var(--k, 1));
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff; }

/* ---- 15-Sep-2026: account bar, saved-map banner, toast ---- */
.gma-acct{margin:0 0 10px;padding:8px 11px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;font-size:12.5px;line-height:1.5}
.gma-acct a{font-weight:700;color:#0b7a3b}
.gma-acct b.ok{color:#15803d}
.gma-acct b.wait{color:#b45309}
.gma-acct.is-clean{background:#f0fdf4;border-color:#86efac}
.gma-cleantag{margin-top:4px;font-size:12px;color:#475569}
.gma-acct.is-clean .gma-cleantag{color:#15803d;font-weight:700}
.gma-resume{position:relative;margin:0 0 12px;padding:11px 12px;border-radius:12px;border:1.5px solid #cbd5e1;background:#fff;font-size:13px;line-height:1.5}
.gma-resume.is-ok{border-color:#16a34a;background:#f0fdf4}
.gma-resume.is-wait{border-color:#f59e0b;background:#fffbeb}
.gma-resume.is-bad{border-color:#ef4444;background:#fef2f2}
.gma-resume .bn{display:block;color:#64748b;font-size:12px}
.gma-resume .ok{color:#15803d;font-weight:700}
.gma-resume .wait{color:#b45309;font-weight:700}
.gma-resume-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.gma-resume-acts button{font:inherit;font-size:12.5px;font-weight:700;padding:6px 11px;border-radius:8px;border:1px solid #0b7a3b;background:#0b7a3b;color:#fff;cursor:pointer}
.gma-resume-acts button[data-close]{background:#fff;color:#334155;border-color:#cbd5e1}
.gma-x{position:absolute;right:6px;top:4px;border:0;background:none;font-size:18px;cursor:pointer;color:#64748b}
.gma-toast{position:fixed;right:18px;bottom:18px;z-index:3000;max-width:360px;padding:14px 16px;border-radius:12px;background:#065f46;color:#fff;font-size:14px;box-shadow:0 18px 40px -16px rgba(0,0,0,.5);transform:translateY(20px);opacity:0;transition:.3s}
.gma-toast.on{transform:none;opacity:1}

/* ---------- 15-Sep-2026 lock: unpaid maps are preview-only --------------- */
.sam-actions .btn.is-locked { opacity: .92; }
.sam-pv { position: fixed; inset: 0; z-index: 3000; background: rgba(15,23,42,.78); display: flex; align-items: center; justify-content: center; padding: 18px; }
.sam-pv-card { background: #fff; border-radius: 14px; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
.sam-pv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 14px; border-bottom: 1px solid #e2e8f0; font-size: 13px; }
.sam-pv-head span { color: #64748b; flex: 1 1 200px; }
.sam-pv-x { border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: #334155; padding: 0 4px; }
.sam-pv-img { position: relative; overflow: auto; background: #f1f5f9; display: flex; justify-content: center; align-items: flex-start; padding: 10px;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.sam-pv-canvas { display: block; max-width: 100%; height: auto; max-height: calc(100vh - 170px); pointer-events: none; }
.sam-pv-shield { position: absolute; inset: 0; display: block; background: transparent; }
.sam-pv-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-top: 1px solid #e2e8f0; }
@media print {
  body.sam-locked * { visibility: hidden !important; }
  body.sam-locked::before { content: "Printing is locked — buy a map package on aljubaer.com to download or print this map."; visibility: visible !important;
    display: block; position: fixed; top: 40mm; left: 0; right: 0; text-align: center; font: 700 16pt Arial, sans-serif; color: #111; }
}

/* 16-Sep-2026: two-step index map for city sheets + South Asia labels */
.sam-loc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.sam-locator.sam-loc-two { width: 56mm; }
.sam-sheet.a3 .sam-locator.sam-loc-two { width: 74mm; }
.sam-loc-lbl { font-size: 6px; line-height: 1; color: #5b646c; white-space: nowrap; transform: translate(-50%, -50%); pointer-events: none; font-weight: 600; }
.sam-loc-lbl.is-bd { color: #7A1519; font-weight: 800; font-size: 6.5px; }
.sam-loc-lbl.is-sea { color: #6f93b0; font-style: italic; font-weight: 500; }
.sam-sheet .sam-loc-lbl { font-size: calc(6px * var(--k, 1)); }

/* 16-Sep-2026: study area description */
.sam-desc { font-size: 13px; line-height: 1.65; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 9px 10px; margin: 8px 0 6px; color: #1e293b; white-space: normal; user-select: text; }
.sam-desc[lang="bn"] { font-family: "Noto Sans Bengali", "Hind Siliguri", system-ui, sans-serif; }
#secDescribe .gma-btn { border: 1px solid #cbd5e1; background: #fff; border-radius: 7px; padding: 5px 10px; font: 600 12px/1.2 system-ui, sans-serif; cursor: pointer; color: #0f172a; }
#secDescribe .gma-btn:hover { border-color: #0f766e; color: #0f766e; }

/* 16-Sep-2026: colour by your own table */
.sam-join { border: 1px dashed #94a3b8; border-radius: 10px; padding: 10px; margin: 8px 0 10px; background: #f8fafc; }
.sam-join-h { font-size: 13px; margin-bottom: 4px; }
.sam-join-file { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #cbd5e1; background: #fff; border-radius: 8px; padding: 6px 10px; font: 600 12.5px/1.2 system-ui, sans-serif; cursor: pointer; }
.sam-join-file:hover { border-color: #0f766e; color: #0f766e; }
.sam-join-body { margin-top: 8px; }
.sam-join-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.sam-join-grid .sam-f span { font-size: 11px; }
.sam-join-grid select, .sam-join-grid input { width: 100%; min-width: 0; }
.sam-join-sum { font-size: 12.5px; margin: 8px 0 6px; }
.sam-join-sum .bad, .sam-join-warn { color: #b91c1c; }
.sam-join-list { display: flex; flex-direction: column; gap: 3px; max-height: 250px; overflow: auto; }
.sam-join-list:not(.all) .sam-join-row:not(.need):nth-child(n+13) { display: none; }
.sam-join-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 56px minmax(0, 1.2fr); gap: 5px; align-items: center; font-size: 12px; }
.sam-join-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sam-join-row .vl { text-align: right; color: #475569; }
.sam-join-row select { font-size: 11.5px; padding: 2px 4px; min-width: 0; }
.sam-join-row.need { background: #fff7ed; border-radius: 4px; }
.st { font-weight: 800; text-align: center; }
.st-exact, .st-code, .st-manual { color: #059669; } .st-fuzzy { color: #d97706; } .st-ambiguous, .st-none { color: #dc2626; }
.sam-join-more { border: 0; background: none; color: #0f766e; font-size: 12px; cursor: pointer; padding: 4px 0; }
.sam-join-acts { display: flex; gap: 6px; margin-top: 8px; }
.sam-join-go { background: #0f766e; color: #fff; border: 0; border-radius: 8px; padding: 7px 12px; font: 700 12.5px/1 system-ui, sans-serif; cursor: pointer; }
.sam-join-go[disabled] { opacity: .5; cursor: default; }
.sam-join-x { background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 7px 10px; font: 600 12px/1 system-ui, sans-serif; cursor: pointer; }

/* 16-Sep-2026: point analysis */
.sam-ana { border: 1px solid #cbd5e1; border-radius: 10px; padding: 10px; margin: 10px 0; background: #fff; }
.sam-ana-h { font-size: 13px; margin-bottom: 6px; }
.sam-ana-part { border-top: 1px solid #e2e8f0; padding-top: 8px; margin-top: 8px; }
.sam-ana-t { display: block; font: 700 12px/1.3 system-ui, sans-serif; margin-bottom: 5px; }
.sam-ana-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sam-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #cbd5e1; border-radius: 999px; padding: 3px 9px; font-size: 12px; cursor: pointer; }
.sam-chip:has(input:checked) { border-color: #0f766e; background: #ecfdf5; }
.sam-chip input[type=number] { width: 64px; font-size: 12px; padding: 1px 4px; }
.sam-ana-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.sam-ana-grid .sam-f span { font-size: 11px; }
.sam-ana-grid select { width: 100%; min-width: 0; }
.sam-ana-go { margin-top: 6px; background: #0f172a; color: #fff; border: 0; border-radius: 8px; padding: 6px 12px; font: 700 12px/1 system-ui, sans-serif; cursor: pointer; }
.sam-ana-tab { width: 100%; border-collapse: collapse; font-size: 12px; margin: 4px 0; }
.sam-ana-tab th, .sam-ana-tab td { padding: 3px 5px; border-bottom: 1px solid #e2e8f0; text-align: left; }
.sam-ana-tab td:nth-child(n+2), .sam-ana-tab th:nth-child(n+2) { text-align: right; }

/* 16-Sep-2026: draw & measure toolbar, notes on the sheet */
.sam-draw { position: sticky; top: 8px; z-index: 900; align-self: center; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; padding: 4px; box-shadow: 0 6px 20px -12px rgba(15,23,42,.5); margin: 6px auto; max-width: calc(100% - 16px); }
.sam-draw button { min-width: 30px; height: 30px; border: 1px solid transparent; background: transparent; border-radius: 7px; font: 700 14px/1 system-ui, sans-serif; color: #0f172a; cursor: pointer; }
.sam-draw button:hover { background: #f1f5f9; }
.sam-draw button.on { background: #0f172a; color: #fff; }
.sam-draw-sep { width: 1px; height: 22px; background: #e2e8f0; margin: 0 3px; }
.sam-draw-cols { display: inline-flex; gap: 3px; }
.sam-draw .sw { min-width: 18px; width: 18px; height: 18px; border-radius: 50%; background: var(--c); border: 2px solid #fff; box-shadow: 0 0 0 1px #cbd5e1; }
.sam-draw .sw.on { box-shadow: 0 0 0 2px #0f172a; }
.sam-draw-tip { font-size: 12px; color: #475569; padding: 0 6px; white-space: nowrap; }
.sam-draw .sam-share-btn { width: auto; padding: 0 10px; background: #0f766e; color: #fff; font-size: 12.5px; }
.sam-draw .sam-share-btn:hover { background: #115e59; }
.leaflet-container.sam-drawing { cursor: crosshair; }
.sam-draw-input { position: absolute; z-index: 1000; transform: translate(-50%, -120%); font: 14px system-ui, sans-serif; padding: 4px 8px; border: 2px solid #0f172a; border-radius: 6px; width: 200px; }
.sam-note-lbl .sam-lbl { font-weight: 700; color: #111827; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; font-size: calc(11px * var(--k, 1)); }
.sam-note-lbl.is-measure .sam-lbl { background: rgba(255,255,255,.9); border: 1px solid #94a3b8; border-radius: 3px; padding: 1px 4px; text-shadow: none; font-size: calc(10px * var(--k, 1)); transform: translate(6px, -120%); }
.sam-arrowhead { width: 0 !important; height: 0 !important; overflow: visible; }
.sam-arrowhead svg { position: absolute; left: 0; top: 0; }

/* share */
.sam-share-modal .sam-modal-card { max-width: 520px; }
.sam-share-go { display: inline-block; background: #0f766e; color: #fff !important; border: 0; border-radius: 8px; padding: 8px 14px; font: 700 13px/1 system-ui, sans-serif; cursor: pointer; text-decoration: none; margin-top: 8px; }
.sam-share-title { width: 100%; }
.sam-share-link { display: flex; gap: 6px; margin: 12px 0 8px; }
.sam-share-link input { flex: 1; min-width: 0; font-size: 12.5px; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px; }
.sam-share-link button, .sam-share-row button { border: 1px solid #cbd5e1; background: #fff; border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 12px; }
.sam-share-qr { display: flex; gap: 12px; align-items: center; }
.sam-share-qr img { width: 150px; height: 150px; image-rendering: pixelated; border: 1px solid #e2e8f0; }
.sam-share-qr .acts { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.sam-share-qr .acts a { color: #0f766e; font-weight: 600; cursor: pointer; }
.sam-share-err { color: #b91c1c !important; }
.sam-share-list h4 { font-size: 13px; margin: 14px 0 6px; }
.sam-share-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: 12.5px; padding: 4px 0; border-top: 1px solid #f1f5f9; }
.sam-share-row a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #0f172a; }
.sam-share-row span { color: #64748b; }
.sam-share-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 18px; background: #0f172a; color: #fff; }
.sam-share-bar b { display: block; font-size: 15px; }
.sam-share-bar span { font-size: 12.5px; color: #cbd5e1; }
.sam-share-cta { background: #14b8a6; color: #042f2e; font-weight: 700; padding: 7px 12px; border-radius: 8px; text-decoration: none; font-size: 13px; }
.sam-share-gone { padding: 12px 18px; background: #fef2f2; color: #991b1b; font-size: 14px; }
.sam-wrap.is-shared { grid-template-columns: minmax(0, 1fr); }
.sam-wrap.is-shared .sam-panel { display: none; }
body.sam-view .sam-draw { display: none; }
@media (max-width: 700px) { .sam-draw-tip { flex-basis: 100%; } .sam-share-qr { flex-direction: column; align-items: flex-start; } }

/* 17-Sep-2026: Area Insights Lab */
.sam-lab { border: 1px solid #99f6e4; border-radius: 12px; padding: 10px; margin: 8px 0 10px; background: linear-gradient(180deg, #f0fdfa, #fff 60%); }
.sam-lab-h { font-size: 13.5px; margin-bottom: 4px; }
.sam-lab-recipes { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 6px 0 8px; }
.sam-lab-recipes button { text-align: left; border: 1px solid #cbd5e1; background: #fff; border-radius: 9px; padding: 6px 8px; cursor: pointer; font: 12px/1.3 system-ui, sans-serif; }
.sam-lab-recipes button b { display: block; font-size: 12px; color: #0f172a; }
.sam-lab-recipes button span { color: #64748b; font-size: 11px; }
.sam-lab-recipes button.on { border-color: #0f766e; box-shadow: inset 0 0 0 1px #0f766e; background: #ecfdf5; }
.sam-lab-items { display: flex; flex-direction: column; gap: 5px; margin: 6px 0; }
.sam-lab-item { display: grid; grid-template-columns: minmax(0, 1fr) 26px 66px 22px; padding: 5px 0; border-bottom: 1px dashed #d1fae5; gap: 4px; align-items: center; font-size: 12px; }
.sam-lab-item:has(select:only-child) { grid-template-columns: 1fr; }
.sam-lab-item > select:first-child { grid-column: 1 / -1; }
.sam-lab-item select { min-width: 0; font-size: 11.5px; padding: 3px; }
.sam-lab-item input[type=range] { width: 100%; accent-color: #0f766e; }
.sam-lab-item em { font-style: normal; font-weight: 700; text-align: right; }
.sam-lab-item button { border: 0; background: none; color: #94a3b8; cursor: pointer; font-size: 16px; }
.sam-lab-add { border: 0; background: none; color: #0f766e; font: 600 12px/1 system-ui, sans-serif; cursor: pointer; padding: 4px 0; }
.sam-lab-go { display: block; width: 100%; margin-top: 6px; background: #0f766e; color: #fff; border: 0; border-radius: 9px; padding: 8px; font: 700 13px/1 system-ui, sans-serif; cursor: pointer; }
.sam-lab-go[disabled] { opacity: .6; }
.sam-lab-tops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sam-lab-tops h5 { margin: 4px 0; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #64748b; }
.sam-lab-tops p { display: flex; justify-content: space-between; gap: 6px; margin: 0; font-size: 12px; border-bottom: 1px dotted #e2e8f0; padding: 2px 0; }
.sam-lab-tops p span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 17-Sep-2026: before / after imagery and land cover ---------- */
.sam-im { border: 1px solid #bfdbfe; border-radius: 12px; padding: 8px 10px; margin: 6px 0 10px; background: linear-gradient(180deg, #eff6ff, #fff 70%); }
.sam-im .sam-chk b { font-size: 12.5px; }
.sam-im-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.sam-im-grid select { min-width: 0; width: 100%; }
.sam-im input[type=range] { width: 100%; accent-color: #1d4ed8; }
.sam-cmp { position: absolute; inset: 0; pointer-events: none; z-index: 650; }
.sam-cmp-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-left: 2px solid #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, .55); }
.sam-cmp-knob { pointer-events: auto; position: absolute; top: 50%; left: -17px; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%;
  border: 2px solid #fff; background: #0f172a; color: #fff; font: 700 15px/1 system-ui, sans-serif; cursor: ew-resize; touch-action: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.sam-cmp-knob:focus-visible { outline: 3px solid #60a5fa; }
.sam-cmp-tag { position: absolute; top: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(15, 23, 42, .78); color: #fff; font: 600 11px/1.2 system-ui, sans-serif; white-space: nowrap; }
.sam-cmp-tag.l { left: 8px; }
.sam-cmp-tag.r { right: 8px; }
.sam-wc-ctl .sam-wc-op { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #475569; margin: 2px 0 4px 24px; }
.sam-wc-ctl .sam-wc-op input { flex: 1; accent-color: #15803d; }
.is-shared .sam-cmp-knob, .sam-view .sam-cmp-knob { pointer-events: auto; }

/* ---------- 17-Sep-2026: sheet looks (sam-style.js) ---------------------- */
.sam-looks { margin: 0 0 10px; }
.sam-looks-h { font: 600 12px/1.3 var(--sam-sans); color: #334155; margin-bottom: 5px; }
.sam-looks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.sam-looks-grid button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 7px; border: 1px solid #cbd5e1; border-radius: 9px; background: #fff; cursor: pointer; text-align: left; font: 12px/1.2 var(--sam-sans); }
.sam-looks-grid button .sw { display: flex; gap: 2px; margin-bottom: 2px; }
.sam-looks-grid button .sw i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.15); }
.sam-looks-grid button small { color: #64748b; font-size: 10.5px; }
.sam-looks-grid button[aria-checked="true"] { border-color: #0f766e; box-shadow: inset 0 0 0 1px #0f766e; background: #f0fdfa; }

/* Modern */
.sam-sheet.look-modern { --sam-ink: #0F172A; --sam-ink-2: #334155; --sam-line: #CBD5E1; --sam-accent: #0EA5E9; }
.sam-sheet.look-modern .sam-frame { border-color: #94A3B8; }
.sam-sheet.look-modern .sam-keybox, .sam-sheet.look-modern .sam-locator, .sam-sheet.look-modern .sam-credit, .sam-sheet.look-modern .sam-legend {
  border-color: #CBD5E1; border-radius: calc(2mm * var(--k)); }
.sam-sheet.look-modern .sam-keytop { border-bottom-color: #E2E8F0; background: linear-gradient(90deg, #F0F9FF, #fff); }
.sam-sheet.look-modern .sam-title { color: #0F3D5E; letter-spacing: 0; }
.sam-sheet.look-modern .sam-subtitle { color: #0284C7; }
.sam-sheet.look-modern .sam-legend-title { border-bottom-color: #E2E8F0; letter-spacing: .2em; color: #0F3D5E; }
.sam-sheet.look-modern .sam-legend-h { color: #0F3D5E; }

/* Journal */
.sam-sheet.look-journal { --sam-sans: Georgia, 'Noto Serif Bengali', 'Times New Roman', serif; --sam-bn: 'Noto Serif Bengali', 'SolaimanLipi', Georgia, serif; --sam-ink: #1F2937; }
.sam-sheet.look-journal .sam-title, .sam-sheet.look-journal .sam-subtitle, .sam-sheet.look-journal .sam-parentline, .sam-sheet.look-journal .sam-legend-title { text-transform: none; letter-spacing: 0; }
.sam-sheet.look-journal .sam-title { font-weight: 700; font-style: normal; }
.sam-sheet.look-journal .sam-subtitle { font-style: italic; font-weight: 400; }
.sam-sheet.look-journal .sam-keybox, .sam-sheet.look-journal .sam-locator, .sam-sheet.look-journal .sam-credit, .sam-sheet.look-journal .sam-legend { border-width: calc(.6px * var(--k)); }
.sam-sheet.look-journal .sam-frame { border-width: .6px; }
.sam-sheet.look-journal .sam-legend-title { font-size: calc(10px * var(--k)); font-weight: 700; }

/* Poster */
.sam-sheet.look-poster .sam-frame { border-width: 2.5px; }
.sam-sheet.look-poster .sam-keybox, .sam-sheet.look-poster .sam-locator, .sam-sheet.look-poster .sam-credit, .sam-sheet.look-poster .sam-legend { border-width: calc(2px * var(--k)); }
.sam-sheet.look-poster .sam-keytop { background: #0F172A; color: #fff; border-bottom: calc(3px * var(--k)) solid #FACC15; }
.sam-sheet.look-poster .sam-keytop .sam-subtitle { color: #FACC15; }
.sam-sheet.look-poster .sam-keytop .sam-parentline { color: #CBD5E1; }
.sam-sheet.look-poster .sam-keytop .sam-scale-nums, .sam-sheet.look-poster .sam-keytop .sam-scale-rf, .sam-sheet.look-poster .sam-keytop .sam-scale-h { color: #E2E8F0; }
.sam-sheet.look-poster .sam-keytop .sam-scale-bar { border-color: #fff; }
.sam-sheet.look-poster .sam-keytop .sam-scale-seg.alt { background: #fff; }
.sam-sheet.look-poster .sam-keytop .sam-scale-seg { background: #0F172A; }
.sam-sheet.look-poster .sam-keytop .sam-north svg * { fill: #fff; stroke: #fff; }
.sam-sheet.look-poster .sam-title { font-size: calc(19px * var(--k)); }
.sam-sheet.look-poster .sam-legend-title { background: #FACC15; }

/* Heritage */
.sam-sheet.look-heritage { --sam-paper: #FBF6EA; --sam-ink: #4A3222; --sam-ink-2: #6B4F3A; --sam-ink-3: #8A7360; --sam-line: #D6C7AE; --sam-accent: #9A3412;
  --sam-sans: Georgia, 'Noto Serif Bengali', 'Times New Roman', serif; }
.sam-sheet.look-heritage .sam-keybox, .sam-sheet.look-heritage .sam-locator, .sam-sheet.look-heritage .sam-credit, .sam-sheet.look-heritage .sam-legend { background: var(--sam-paper); }
.sam-sheet.look-heritage .sam-frame { border: 3px double var(--sam-ink); }
.sam-sheet.look-heritage .sam-title { color: #7C2D12; letter-spacing: .06em; }
.sam-sheet.look-heritage .sam-legend-title { color: #7C2D12; }
.sam-sheet.look-heritage .sam-nbr { color: #4A3222; text-shadow: 0 0 3px #FBF6EA, 0 0 3px #FBF6EA, 0 0 3px #FBF6EA; }

/* ---------- 17-Sep-2026: find an area (sam-find.js) ---------------------- */
.sam-find { position: relative; margin: 0 0 8px; }
.sam-find-in { display: flex; align-items: center; gap: 6px; border: 1.5px solid #0f766e; border-radius: 10px; padding: 0 8px; background: #fff; }
.sam-find-in:focus-within { box-shadow: 0 0 0 3px rgba(15, 118, 110, .18); }
.sam-find-in input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 8px 0; font: 13px/1.2 var(--sam-sans); background: transparent; }
.sam-find-list { position: absolute; z-index: 1200; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; box-shadow: 0 12px 30px rgba(15, 23, 42, .18); max-height: 340px; overflow: auto; padding: 4px; }
.sam-find-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.sam-find-row.on, .sam-find-row:hover { background: #f0fdfa; }
.sam-find-row .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sam-find-row b { font-size: 13px; color: #0f172a; }
.sam-find-row small { font-size: 11px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sam-find-row .add { flex: 0 0 26px; height: 26px; border-radius: 50%; border: 1px solid #0f766e; background: #fff; color: #0f766e; font: 700 16px/1 system-ui, sans-serif; cursor: pointer; }
.sam-find-none, .sam-find-tip { margin: 6px 8px; font-size: 12px; color: #64748b; }
.sam-find-more { display: block; width: 100%; text-align: left; margin-top: 4px; border: 0; border-top: 1px dashed #cbd5e1; background: none; padding: 8px; font: 600 12px/1.2 var(--sam-sans); color: #0f766e; cursor: pointer; }

/* ---------- 18-Sep-2026: five more sheet looks -------------------------- */
/* Editorial — a magazine/newsletter page */
.sam-sheet.look-editorial { --sam-sans: 'Source Serif 4', Georgia, 'Noto Serif Bengali', serif; --sam-bn: 'Noto Serif Bengali', 'SolaimanLipi', Georgia, serif;
  --sam-ink: #111827; --sam-ink-2: #374151; --sam-line: #D1D5DB; --sam-accent: #B45309; }
.sam-sheet.look-editorial .sam-title { font-family: 'Playfair Display', Georgia, serif; text-transform: none; letter-spacing: 0; font-weight: 800; }
.sam-sheet.look-editorial .sam-subtitle { font-style: italic; text-transform: none; letter-spacing: .02em; color: #B45309; }
.sam-sheet.look-editorial .sam-parentline { text-transform: none; letter-spacing: .02em; }
.sam-sheet.look-editorial .sam-keytop { border-bottom-width: calc(2px * var(--k)); }
.sam-sheet.look-editorial .sam-legend-title { font-family: 'Playfair Display', Georgia, serif; letter-spacing: .12em; text-transform: uppercase; }
.sam-sheet.look-editorial .sam-keybox, .sam-sheet.look-editorial .sam-legend, .sam-sheet.look-editorial .sam-locator, .sam-sheet.look-editorial .sam-credit { border-width: calc(.7px * var(--k)); }

/* Minimal — hairlines and air */
.sam-sheet.look-minimal { --sam-ink: #334155; --sam-ink-2: #475569; --sam-line: #E2E8F0; --sam-accent: #0F766E;
  --sam-sans: 'IBM Plex Sans', Inter, system-ui, sans-serif; }
.sam-sheet.look-minimal .sam-frame { border-width: .5px; border-color: #CBD5E1; }
.sam-sheet.look-minimal .sam-keybox, .sam-sheet.look-minimal .sam-legend, .sam-sheet.look-minimal .sam-locator, .sam-sheet.look-minimal .sam-credit { border: 0; box-shadow: inset 0 0 0 calc(.5px * var(--k)) #E2E8F0; border-radius: calc(1.5mm * var(--k)); }
.sam-sheet.look-minimal .sam-keytop { border-bottom: calc(.5px * var(--k)) solid #E2E8F0; }
.sam-sheet.look-minimal .sam-title { font-weight: 600; text-transform: none; letter-spacing: -.01em; }
.sam-sheet.look-minimal .sam-legend-title { font-weight: 600; letter-spacing: .22em; border-bottom-color: #E2E8F0; }

/* Slate — consultancy report */
.sam-sheet.look-slate { --sam-ink: #0F172A; --sam-ink-2: #334155; --sam-line: #CBD5E1; --sam-accent: #0EA5E9;
  --sam-sans: 'IBM Plex Sans', Inter, system-ui, sans-serif; }
.sam-sheet.look-slate .sam-keytop { background: #1E293B; color: #fff; border-bottom: calc(2px * var(--k)) solid #0EA5E9; }
.sam-sheet.look-slate .sam-keytop .sam-subtitle { color: #7DD3FC; }
.sam-sheet.look-slate .sam-keytop .sam-parentline, .sam-sheet.look-slate .sam-keytop .sam-scale-nums,
.sam-sheet.look-slate .sam-keytop .sam-scale-rf, .sam-sheet.look-slate .sam-keytop .sam-scale-h { color: #CBD5E1; }
.sam-sheet.look-slate .sam-keytop .sam-scale-bar { border-color: #fff; }
.sam-sheet.look-slate .sam-keytop .sam-scale-seg { background: #1E293B; }
.sam-sheet.look-slate .sam-keytop .sam-scale-seg.alt { background: #fff; }
.sam-sheet.look-slate .sam-keytop .sam-north svg * { fill: #fff; stroke: #fff; }
.sam-sheet.look-slate .sam-legend-title { background: #E2E8F0; letter-spacing: .24em; }
.sam-sheet.look-slate .sam-keybox, .sam-sheet.look-slate .sam-legend, .sam-sheet.look-slate .sam-locator, .sam-sheet.look-slate .sam-credit { border-color: #94A3B8; }

/* Ocean — coastal and climate */
.sam-sheet.look-ocean { --sam-paper: #F8FDFC; --sam-ink: #134E4A; --sam-ink-2: #115E59; --sam-ink-3: #5F8C88; --sam-line: #99F6E4; --sam-accent: #0D9488; }
.sam-sheet.look-ocean .sam-keybox, .sam-sheet.look-ocean .sam-legend, .sam-sheet.look-ocean .sam-locator, .sam-sheet.look-ocean .sam-credit { background: var(--sam-paper); border-color: #5EEAD4; border-radius: calc(2mm * var(--k)); }
.sam-sheet.look-ocean .sam-keytop { background: linear-gradient(90deg, #CCFBF1, var(--sam-paper)); border-bottom-color: #5EEAD4; }
.sam-sheet.look-ocean .sam-title { color: #0F766E; }
.sam-sheet.look-ocean .sam-legend-title { color: #0F766E; border-bottom-color: #5EEAD4; }

/* Pentraex — the brand look */
.sam-sheet.look-violet { --sam-ink: #0B1B2B; --sam-ink-2: #334155; --sam-line: #DDD6FE; --sam-accent: #5A33F2;
  --sam-sans: Inter, 'IBM Plex Sans', system-ui, sans-serif; }
.sam-sheet.look-violet .sam-keytop { background: linear-gradient(90deg, #EDE9FE, #fff); border-bottom: calc(2px * var(--k)) solid #5A33F2; }
.sam-sheet.look-violet .sam-title { color: #2E1065; letter-spacing: -.005em; }
.sam-sheet.look-violet .sam-subtitle { color: #5A33F2; }
.sam-sheet.look-violet .sam-keybox, .sam-sheet.look-violet .sam-legend, .sam-sheet.look-violet .sam-locator, .sam-sheet.look-violet .sam-credit { border-color: #C4B5FD; border-radius: calc(2mm * var(--k)); }
.sam-sheet.look-violet .sam-legend-title { background: #5A33F2; color: #fff; letter-spacing: .26em; }

/* ---------- 18-Sep-2026: the uploaded-layer manager --------------------- */
.sam-lay { display: block; border: 1px solid var(--sam-line); border-radius: 10px; margin: 6px 0; background: #fff; overflow: hidden; }
.sam-lay.is-open { border-color: #0f766e; box-shadow: 0 2px 10px rgba(15, 118, 110, .10); }
.sam-lay.is-off { opacity: .6; }
.sam-lay-top { display: flex; align-items: center; gap: 6px; padding: 6px 7px; }
.sam-lay-top input[type=color] { width: 26px; height: 26px; padding: 0; border: 1px solid var(--sam-line); border-radius: 6px; background: none; flex: 0 0 auto; cursor: pointer; }
.sam-lay-name { flex: 1 1 auto; min-width: 0; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; font: 600 12.5px/1.2 var(--sam-sans); color: var(--sam-ink); background: transparent; }
.sam-lay-name:hover { border-color: var(--sam-line); }
.sam-lay-name:focus { border-color: #0f766e; outline: 0; background: #f8fafc; }
.sam-lay-top em { font-style: normal; font-size: 10.5px; color: var(--sam-ink-3); white-space: nowrap; }
.sam-lay-top button { border: 0; background: none; cursor: pointer; font-size: 13px; color: #64748b; padding: 3px 4px; border-radius: 6px; }
.sam-lay-top button:hover { background: #f1f5f9; color: #0f172a; }
.sam-lay-body { border-top: 1px dashed var(--sam-line); padding: 8px 9px 10px; background: #FBFDFE; }
.sam-lay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0; }
.sam-f.sm { font-size: 11.5px; }
.sam-f.sm span { font-size: 11px; color: #475569; }
.sam-f.sm input[type=range] { width: 100%; accent-color: #0f766e; }
.sam-lay-vals { display: flex; flex-wrap: wrap; gap: 4px; max-height: 122px; overflow: auto; margin: 4px 0 2px; padding: 4px; border: 1px solid var(--sam-line); border-radius: 8px; background: #fff; }
.sam-chip.sm { font-size: 11px; padding: 3px 8px; }
.sam-chip.sm i { font-style: normal; color: #94a3b8; }
.sam-lay-acts { display: flex; gap: 6px; margin-top: 6px; }
.sam-lay-acts button { flex: 1; border: 1px solid var(--sam-line); background: #fff; border-radius: 7px; padding: 5px; font: 600 11.5px/1 var(--sam-sans); cursor: pointer; color: #334155; }
.sam-lay-acts button[disabled] { opacity: .45; cursor: default; }
.sam-user-label .sam-lbl { font-size: calc(8px * var(--k, 1)); font-weight: 600; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }
.sam-user-pt { background: none; border: 0; }

/* ---- live open data (sam-live.js), 17-Sep-2026 ---------------------- */
.sam-live { border: 1px solid #c7d2fe; border-radius: 12px; padding: 9px 11px; margin: 10px 0 4px;
            background: linear-gradient(180deg, #eef2ff, #fff 72%); }
.sam-live-h { font-size: 13px; margin-bottom: 2px; }
.sam-live-h i.bn { font-weight: 500; }
.sam-live-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sam-live-grid select, .sam-live select { width: 100%; min-width: 0; }
.sam-live-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 7px; }
.sam-live-msg { margin-top: 7px; font-size: 11.5px; line-height: 1.5; color: #334155; }
.sam-live-msg.bad { color: #b91c1c; }
.sam-live-opt { margin: 4px 0 2px; }
.sam-live-clim { margin-top: 10px; border-top: 1px dashed #c7d2fe; padding-top: 8px; }
.sam-live-climh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; }
.sam-live-climh .sm { font-size: 11px; color: #64748b; }
.sam-clim-bars { display: flex; align-items: flex-end; gap: 3px; height: 74px; margin: 8px 0 4px; }
.sam-clim-b { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.sam-clim-b i { display: block; width: 100%; background: linear-gradient(180deg, #60a5fa, #1d4ed8); border-radius: 3px 3px 0 0; min-height: 2px; }
.sam-clim-b span { font-size: 9px; color: #64748b; margin-top: 3px; white-space: nowrap; }
.sam-live-sum { font-size: 11.5px; line-height: 1.6; margin: 4px 0 0; color: #1e293b; }
/* one-click row, 18-Sep-2026 */
.sam-live-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0 2px; }
.sam-live-q { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px;
              border: 1px solid #c7d2fe; border-radius: 9px; background: #fff; cursor: pointer; color: #1e293b; }
.sam-live-q b { font-size: 16px; line-height: 1; font-weight: 400; }
.sam-live-q span { font: 600 10.5px/1.25 var(--sam-sans); text-align: center; }
.sam-live-q i.bn { display: block; font-weight: 500; color: #64748b; font-size: 9.5px; }
.sam-live-q:hover { border-color: #6366f1; background: #eef2ff; }
.sam-live-q:focus-visible { outline: 2px solid #4338ca; outline-offset: 1px; }
.sam-live-q[disabled] { opacity: .5; cursor: default; }
.sam-live-q.is-busy { border-color: #4338ca; background: #e0e7ff; }
.sam-live-more { margin-top: 8px; }
.sam-live-more > summary { cursor: pointer; font: 600 11.5px/1.4 var(--sam-sans); color: #4338ca; }

/* =====================================================================
   PANEL — colour, order and weight                        18 Sep 2026
   The panel worked but read as one long grey list: every section looked
   like every other one, so finding "Labels" meant reading all eight
   headings. Each section now owns a colour, carried by the number badge,
   a left rail and the open state, so the eye finds the section before
   the words are read. Pentraex purple leads; the rest are its companions.
   ===================================================================== */
.sam-panel {
  --pxa: #5A33F2;          /* brand */
  --pxa2: #7C3AED;
}
.gma-sec {
  --sec: #5A33F2; --sec2: #7C3AED;
  border: 1px solid var(--sam-line);
  border-left: 3px solid color-mix(in srgb, var(--sec) 55%, #fff);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.gma-sec:nth-of-type(1) { --sec: #5A33F2; --sec2: #7C3AED; }   /* Area        */
.gma-sec:nth-of-type(2) { --sec: #DB2777; --sec2: #F472B6; }   /* Study text  */
.gma-sec:nth-of-type(3) { --sec: #2563EB; --sec2: #38BDF8; }   /* Layers      */
.gma-sec:nth-of-type(4) { --sec: #EA580C; --sec2: #FB923C; }   /* Colour      */
.gma-sec:nth-of-type(5) { --sec: #0D9488; --sec2: #2DD4BF; }   /* Labels      */
.gma-sec:nth-of-type(6) { --sec: #4F46E5; --sec2: #818CF8; }   /* Title       */
.gma-sec:nth-of-type(7) { --sec: #16A34A; --sec2: #4ADE80; }   /* Sheet       */
.gma-sec:nth-of-type(8) { --sec: #0891B2; --sec2: #22D3EE; }   /* Own data    */
.gma-sec:nth-of-type(9) { --sec: #5A33F2; --sec2: #A855F7; }   /* Download    */

.gma-sec > summary {
  border-radius: 7px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sec) 8%, #fff), #fff 72%);
  font-weight: 650;
}
.gma-sec[open] { border-color: color-mix(in srgb, var(--sec) 40%, var(--sam-line)); box-shadow: 0 6px 18px -14px var(--sec); }
.gma-sec[open] > summary { border-bottom: 1px solid color-mix(in srgb, var(--sec) 18%, #fff); border-radius: 7px 7px 0 0; }
.gma-sec > summary:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--sec) 14%, #fff), #fff 78%); }
.gma-sec > summary .n {
  width: 22px; height: 22px; font-size: 11.5px; font-weight: 700;
  background: linear-gradient(135deg, var(--sec), var(--sec2));
  box-shadow: 0 3px 8px -4px var(--sec);
}
.gma-sec > summary::after { color: var(--sec); font-weight: 700; }
.gma-sec > summary em {
  padding: 2px 8px; border-radius: 999px; font-weight: 600;
  background: color-mix(in srgb, var(--sec) 10%, #fff);
  color: color-mix(in srgb, var(--sec) 78%, #0f172a);
}
/* the group headings inside a section pick the section's colour up */
.sam-group-h {
  color: color-mix(in srgb, var(--sec, #5A33F2) 72%, #0f172a);
  border-left: 3px solid color-mix(in srgb, var(--sec, #5A33F2) 45%, #fff);
  padding-left: 7px; border-radius: 2px;
}

/* the five map kinds: real cards, and the chosen one is unmistakable */
.gma-types button {
  border-radius: 11px; transition: transform .12s, box-shadow .15s, border-color .15s, background .15s;
  background: linear-gradient(180deg, #fff, #FAFAFF);
}
.gma-types button:hover { transform: translateY(-1px); border-color: var(--pxa, #5A33F2); box-shadow: 0 8px 18px -14px #5A33F2; }
.gma-types button.is-on {
  border-color: transparent; background: linear-gradient(135deg, #5A33F2, #7C3AED);
  box-shadow: 0 10px 22px -12px rgba(90, 51, 242, .85);
}
.gma-types button.is-on b, .gma-types button.is-on span { color: #fff; }

/* primary actions carry the brand, so "what do I press" has one answer */
.sam-btn.is-primary, #samAddArea:hover, .sam-live-q.is-busy { border-color: #5A33F2; }
#samAddArea { border-radius: 9px; color: #5A33F2; border-color: color-mix(in srgb, #5A33F2 35%, #fff); font-weight: 650; }
#samAddArea:hover { background: color-mix(in srgb, #5A33F2 8%, #fff); }

/* the "All …" row at the top of the last dropdown */
option.sam-opt-all { font-weight: 700; color: #5A33F2; background: #F5F3FF; }

/* the panel's own header line */
.sam-panel > h1, .sam-panel .sam-brand-h {
  background: linear-gradient(90deg, #5A33F2, #3b82f6 60%, #0d9488);
  -webkit-background-clip: text; background-clip: text;
}
.sam-panel-head h1 .bn { margin-left: 6px; font-weight: 500; opacity: .75; -webkit-text-fill-color: currentColor; color: var(--sam-ink-3); }

/* =====================================================================
   North arrow + scale, on the map          18 Sep 2026
   They used to live in the key box beside the legend, so a figure cropped
   out of the sheet carried neither. They now sit in the map's bottom-right
   corner — arrow above, scale under it — on a small paper-coloured plate
   that keeps them readable over imagery as well as over white.
   ===================================================================== */
.sam-ns.on-map {
  position: absolute; right: calc(3mm * var(--k)); bottom: calc(3mm * var(--k)); z-index: 640;
  display: flex; flex-direction: column; align-items: center; gap: calc(1mm * var(--k));
  padding: calc(1.6mm * var(--k)) calc(2.2mm * var(--k));
  /* rgba, not color-mix(): html2canvas 1.4 cannot parse color-mix/color() and every download failed */
  background: rgba(255, 255, 255, .88);
  border: calc(.5px * var(--k)) solid rgba(17, 17, 17, .22);
  border-radius: calc(1.5mm * var(--k));
  pointer-events: none;
}
.sam-ns.on-map .sam-north { line-height: 0; }
.sam-ns.on-map .sam-north svg { width: calc(20px * var(--k)); height: auto; }
.sam-ns.on-map .sam-scale { text-align: center; }
.sam-ns.on-map .sam-scale-h { text-align: center; }
.sam-ns.on-map .sam-scale-nums.three { justify-content: space-between; }
/* the scale bar variants */
.sam-scale-seg.wide { flex: 2 1 0; }
.sam-scale-bar.two { border-top-width: 0; }
.sam-scale-bar.two:first-of-type { border-top-width: calc(.7px * var(--k)); }
.sam-scale-bar.hollow .sam-scale-seg { background: transparent; border-right: calc(.7px * var(--k)) solid var(--sam-ink); }
.sam-scale-bar.hollow .sam-scale-seg:last-child { border-right: 0; }
.sam-scale-line { position: relative; display: flex; justify-content: space-between; align-items: flex-end;
                  height: calc(5px * var(--k)); border-bottom: calc(.9px * var(--k)) solid var(--sam-ink); }
.sam-scale-line i { display: block; width: calc(.9px * var(--k)); height: 100%; background: var(--sam-ink); }
.sam-scale-line i.mid { height: 60%; }
.sam-scale-rf.big { font-size: calc(11px * var(--k)); font-weight: 700; letter-spacing: .02em; }
/* explore mode is a screen map, not a sheet: keep the plate small */
.sam-sheet.mode-explore .sam-ns.on-map { right: 10px; bottom: 26px; }

/* ---- the picker in the panel --------------------------------------- */
.sam-nspick { border: 1px solid #ddd6fe; border-radius: 12px; padding: 9px 11px; margin: 0 0 10px;
              background: linear-gradient(180deg, #faf5ff, #fff 70%); }
.sam-nsp-h { display: flex; align-items: baseline; gap: 6px; font: 700 12px/1.3 var(--sam-sans); margin: 4px 0 7px; color: #4c1d95; }
.sam-nsp-h i.bn { font-weight: 500; font-size: 11px; color: var(--sam-ink-3); }
.sam-nsp-h em { margin-left: auto; font-style: normal; font-size: 10px; font-weight: 500; color: var(--sam-ink-3); }
.sam-nsp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.sam-nsp-grid button { display: grid; justify-items: center; gap: 2px; padding: 6px 3px; border: 1.5px solid var(--sam-line);
                       border-radius: 9px; background: #fff; cursor: pointer; }
.sam-nsp-grid button:hover { border-color: #8b5cf6; }
.sam-nsp-grid button[aria-checked=true] { border-color: #5A33F2; background: #f5f3ff; box-shadow: 0 6px 14px -10px #5A33F2; }
.sam-nsp-pv { display: block; height: 34px; }
.sam-nsp-pv svg { height: 34px; width: auto; }
.sam-nsp-grid small { font-size: 8.5px; line-height: 1.15; text-align: center; color: var(--sam-ink-3); }
.sam-nsp-list { display: grid; gap: 5px; margin-top: 2px; }
.sam-nsp-list button { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 8px;
                       padding: 6px 9px; border: 1.5px solid var(--sam-line); border-radius: 9px; background: #fff; cursor: pointer; text-align: left; }
.sam-nsp-list button:hover { border-color: #8b5cf6; }
.sam-nsp-list button[aria-checked=true] { border-color: #5A33F2; background: #f5f3ff; }
.sam-nsp-list b { font: 650 11.5px/1.2 var(--sam-sans); }
.sam-nsp-list small { font-size: 10px; color: var(--sam-ink-3); }
.sam-nsp-sv { display: flex; height: 9px; border: 1px solid #334155; }
.sam-nsp-sv i { flex: 1 1 0; background: #fff; }
.sam-nsp-sv.sv-checker i:nth-child(even), .sam-nsp-sv.sv-twotier i:nth-child(even) { background: #334155; }
.sam-nsp-sv.sv-ladder i:nth-child(odd) { background: #334155; }
.sam-nsp-sv.sv-hollow i { border-right: 1px solid #334155; }
.sam-nsp-sv.sv-line { border: 0; border-bottom: 2px solid #334155; align-items: flex-end; }
.sam-nsp-sv.sv-line i { flex: 0 0 1px; background: #334155; height: 100%; margin-right: auto; }
.sam-nsp-sv.sv-rf { border: 0; }
.sam-nsp-sv.sv-rf i { background: none; }
.sam-nsp-sv.sv-rf::after { content: '1:50k'; font: 700 9px/1 var(--sam-sans); color: #334155; }

/* =====================================================================
   Title block — one line each                        18 Sep 2026
   A long upazila name wrapped the title onto three lines and pushed the
   subtitle and the parent line down, so two sheets of the same paper had
   the legend starting at different heights. Title and subtitle are now one
   line each: the type shrinks to fit (down to a floor that is still
   readable in print) and only then clips with an ellipsis. The full text
   stays in the title attribute and in the exported project.
   ===================================================================== */
.sam-head { overflow: hidden; }
.sam-title, .sam-subtitle, .sam-parentline {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal;
  display: block; max-width: 100%;
}
.sam-title { line-height: 1.18; }
/* the shrink steps the sheet applies when the text does not fit */
.sam-title.fit-1 { font-size: calc(15px * var(--k)); }
.sam-title.fit-2 { font-size: calc(13px * var(--k)); }
.sam-title.fit-3 { font-size: calc(11.5px * var(--k)); letter-spacing: -.01em; }
.sam-subtitle.fit-1 { font-size: calc(9px * var(--k)); letter-spacing: .05em; }
.sam-subtitle.fit-2 { font-size: calc(8px * var(--k)); letter-spacing: .02em; }

/* Area Insights Lab — the brand colours, and the "no data" note */
.sam-lab { border-color: #ddd6fe; background: linear-gradient(180deg, #faf5ff, #fff 72%); }
.sam-lab-h b { color: #4c1d95; }
.sam-lab-recipes button.on { border-color: #5A33F2; background: #f5f3ff; box-shadow: 0 6px 16px -12px #5A33F2; }
.sam-lab-go { background: linear-gradient(135deg, #5A33F2, #7C3AED); border: 0; color: #fff; }
.sam-lab-go[disabled] { opacity: .55; }
.sam-lab-item select { min-width: 0; }
.sam-lab-item select optgroup { font-style: normal; font-weight: 700; color: #4c1d95; }
.sam-lab-skip { margin: 4px 0 8px; padding: 6px 9px; border-radius: 8px; background: #fffbeb;
                border: 1px solid #fcd34d; color: #92400e; font-size: 11.2px; line-height: 1.5; }
.sam-lab-skip .bn { color: #a16207; }
.sam-join-warn { padding: 8px 10px; border-radius: 9px; background: #fef2f2; border: 1px solid #fecaca;
                 color: #991b1b; font-size: 11.8px; line-height: 1.55; }

/* land cover source picker, 18 Sep 2026 */
.sam-wc-ctl { border: 1px solid #bbf7d0; border-radius: 10px; padding: 7px 9px; margin-top: 6px;
              background: linear-gradient(180deg, #f0fdf4, #fff 72%); }
.sam-wc-body { margin-top: 6px; display: grid; gap: 6px; }
.sam-wc-body select { width: 100%; min-width: 0; }
.sam-wc-body select optgroup { font-style: normal; font-weight: 700; color: #166534; }
.sam-wc-op { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; font-size: 11.5px; }
.sam-wc-op input[type=range] { width: 100%; accent-color: #16a34a; }
.sam-im-down { color: #92400e; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; padding: 6px 8px; margin-top: 6px; }
.sam-im-down .linkish { color: #b45309; font-weight: 700; }