/* ============================================================
   Now Listen To Me — shared theme
   Source of truth for design tokens + low-specificity base
   classes. Tools opt in by linking this file and referencing
   var(--nltm-*) tokens instead of hardcoding values.
   ============================================================ */

:root {
   /* Brand palette — evolved from the legacy #007acc */
   --nltm-primary:        #1f7fbf;
   --nltm-primary-deep:   #0b4f86;
   --nltm-primary-soft:   #d6ebf7;
   --nltm-accent:         #e0922e;   /* treasure / pin marker */
   --nltm-accent-soft:    #fbe7c8;
   --nltm-success:        #2f8f5d;

   /* Surfaces & ink */
   --nltm-bg:             #f4efe4;   /* warm parchment */
   --nltm-bg-tint:        #ece4d2;
   --nltm-surface:        #fffdf7;
   --nltm-surface-2:      #f8f1e1;
   --nltm-ink:            #1f2a33;
   --nltm-muted:          #5b6770;
   --nltm-line:           #d8cdb4;

   /* Typography */
   --nltm-font-display:   "Fraunces", "Iowan Old Style", "Georgia", serif;
   --nltm-font-hand:      "Caveat Brush", "Bradley Hand", cursive;
   --nltm-font-body:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   --nltm-font-mono:      "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

   --nltm-fs-1:  0.8125rem;
   --nltm-fs-2:  0.9375rem;
   --nltm-fs-3:  1.0625rem;
   --nltm-fs-4:  1.25rem;
   --nltm-fs-5:  1.625rem;
   --nltm-fs-6:  2.25rem;
   --nltm-fs-7:  3rem;

   --nltm-lh-tight:  1.2;
   --nltm-lh-base:   1.55;

   /* Spacing scale (4px base) */
   --nltm-sp-1: 0.25rem;
   --nltm-sp-2: 0.5rem;
   --nltm-sp-3: 0.75rem;
   --nltm-sp-4: 1rem;
   --nltm-sp-5: 1.5rem;
   --nltm-sp-6: 2rem;
   --nltm-sp-7: 3rem;
   --nltm-sp-8: 4rem;

   /* Radii / shadows */
   --nltm-radius-sm: 4px;
   --nltm-radius:    10px;
   --nltm-radius-lg: 18px;

   --nltm-shadow-1: 0 1px 2px rgba(11, 79, 134, 0.08), 0 1px 1px rgba(0,0,0,0.04);
   --nltm-shadow-2: 0 4px 14px rgba(11, 79, 134, 0.10), 0 2px 4px rgba(0,0,0,0.05);
   --nltm-shadow-3: 0 14px 40px rgba(11, 79, 134, 0.18);

   /* Subtle topo / map background — encoded SVG */
   --nltm-bg-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%230b4f86' stroke-opacity='0.07' stroke-width='1'><path d='M-20 40 Q 40 20 90 50 T 200 60'/><path d='M-20 80 Q 50 60 100 90 T 200 100'/><path d='M-20 120 Q 30 100 80 130 T 200 140'/><path d='M-20 160 Q 60 140 110 170 T 200 180'/><circle cx='40' cy='40' r='2' fill='%230b4f86' fill-opacity='0.10' stroke='none'/><circle cx='150' cy='110' r='2' fill='%23e0922e' fill-opacity='0.18' stroke='none'/></g></svg>");
}

@media (prefers-color-scheme: dark) {
   :root {
      --nltm-bg:           #14202a;
      --nltm-bg-tint:      #18262f;
      --nltm-surface:      #1c2933;
      --nltm-surface-2:    #243340;
      --nltm-ink:          #e9ecef;
      --nltm-muted:        #9aa7b1;
      --nltm-line:         #2f3e4a;
      --nltm-primary:      #5fb0e5;
      --nltm-primary-deep: #bcdcf2;
      --nltm-primary-soft: #1f3a4e;
      --nltm-accent:       #f0a957;
      --nltm-accent-soft:  #3b2c17;
      --nltm-shadow-1: 0 1px 2px rgba(0,0,0,0.5);
      --nltm-shadow-2: 0 4px 14px rgba(0,0,0,0.45);
      --nltm-shadow-3: 0 14px 40px rgba(0,0,0,0.55);
   }
}

/* ---------- Base classes (opt-in, low specificity) ---------- */

.nltm-page {
   margin: 0;
   font-family: var(--nltm-font-body);
   font-size: var(--nltm-fs-3);
   line-height: var(--nltm-lh-base);
   color: var(--nltm-ink);
   background-color: var(--nltm-bg);
   background-image: var(--nltm-bg-pattern);
   background-attachment: fixed;
   -webkit-font-smoothing: antialiased;
}

.nltm-wordmark {
   font-family: var(--nltm-font-display);
   font-weight: 600;
   font-style: italic;
   letter-spacing: -0.01em;
   line-height: var(--nltm-lh-tight);
   margin: 0;
}

.nltm-frame-header {
   font-family: var(--nltm-font-display);
   font-weight: 600;
   font-size: var(--nltm-fs-4);
   color: var(--nltm-surface);
   background: linear-gradient(120deg, var(--nltm-primary-deep), var(--nltm-primary));
   padding: var(--nltm-sp-2) var(--nltm-sp-4);
   border-bottom: 2px solid var(--nltm-accent);
}

.nltm-card {
   background: var(--nltm-surface);
   border: 1px solid var(--nltm-line);
   border-radius: var(--nltm-radius);
   box-shadow: var(--nltm-shadow-1);
   padding: var(--nltm-sp-5);
}

.nltm-link {
   color: var(--nltm-primary-deep);
   text-decoration: none;
   border-bottom: 1px dotted currentColor;
}
.nltm-link:hover { color: var(--nltm-accent); border-bottom-style: solid; }

.nltm-button {
   font-family: var(--nltm-font-body);
   font-size: var(--nltm-fs-2);
   font-weight: 600;
   color: var(--nltm-surface);
   background: var(--nltm-primary);
   border: none;
   border-radius: var(--nltm-radius-sm);
   padding: var(--nltm-sp-2) var(--nltm-sp-4);
   cursor: pointer;
   transition: background-color 120ms ease;
}
.nltm-button:hover { background: var(--nltm-primary-deep); }
.nltm-button:disabled {
   background: var(--nltm-line);
   color: var(--nltm-muted);
   cursor: not-allowed;
}

.nltm-input {
   font: inherit;
   color: var(--nltm-ink);
   background: var(--nltm-surface);
   border: 1px solid var(--nltm-line);
   border-radius: var(--nltm-radius-sm);
   padding: var(--nltm-sp-2) var(--nltm-sp-3);
}
.nltm-input:focus {
   outline: 2px solid var(--nltm-primary);
   outline-offset: 1px;
}

/* ---------- Tool chrome: gradient header + hamburger nav ----------
   Reusable header for tools that keep the shared hamburger menu
   (../Shared/hamburgermenu.{css,js}). Markup:

      <div class="topnav">
         <div class="nltm-tool-header" id="FrameHeader">
            <span class="nltm-tool-title">Tool Name</span>
            <span class="nltm-tool-sub">Now Listen To Me Geocacher</span>
         </div>
         <div id="myLinks"></div>
         <a href="javascript:void(0);" class="icon" onclick="HamburgerMenu_Open()">
            <i class="fa fa-bars"></i></a>
      </div>

   The #FrameHeader-qualified selector beats hamburgermenu.css's
   id rule (#FrameHeader { left:15px; padding:0 5px }). The
   .nltm-page-qualified .topnav rule beats hamburgermenu.css's
   later-loaded .topnav rule. */

.nltm-page .topnav { overflow: visible; background: transparent; }

#FrameHeader.nltm-tool-header {
   position: relative;
   left: 0;
   display: flex;
   align-items: baseline;
   gap: var(--nltm-sp-3);
   padding: var(--nltm-sp-4) var(--nltm-sp-5) var(--nltm-sp-4) var(--nltm-sp-8);
   color: #fdf6e7;
   background:
      radial-gradient(circle at 18% 30%, rgba(224, 146, 46, 0.22), transparent 55%),
      radial-gradient(circle at 82% 70%, rgba(95, 176, 229, 0.20), transparent 55%),
      linear-gradient(125deg, var(--nltm-primary-deep) 0%, var(--nltm-primary) 60%, #2f97cc 100%);
   border-bottom: 3px solid var(--nltm-accent);
}

.nltm-tool-title {
   font-family: var(--nltm-font-display);
   font-style: italic;
   font-weight: 700;
   font-size: var(--nltm-fs-5);
   letter-spacing: -0.015em;
   text-shadow: 0 2px 12px rgba(0, 0, 0, 0.20);
}

.nltm-tool-sub {
   font-family: var(--nltm-font-hand);
   font-size: var(--nltm-fs-3);
   color: var(--nltm-accent-soft);
   transform: rotate(-2deg);
}

/* Hamburger icon, white, inside the gradient header. Pinned to a
   fixed offset (not top:50%) so it stays put when the menu opens and
   the .topnav grows taller. */
#FrameHeader.nltm-tool-header ~ a.icon {
   background: transparent;
   top: var(--nltm-sp-4);
   left: var(--nltm-sp-4);
   color: #fdf6e7;
   font-size: var(--nltm-fs-4);
}
#FrameHeader.nltm-tool-header ~ a.icon:hover { background: transparent; color: var(--nltm-accent); }

/* Dropdown links (id-qualified to beat hamburgermenu.css's .topnav a) */
.topnav #myLinks a {
   background: var(--nltm-surface);
   color: var(--nltm-ink);
   border-bottom: 1px solid var(--nltm-line);
   padding: var(--nltm-sp-2) var(--nltm-sp-5);
   font-family: var(--nltm-font-body);
   font-size: var(--nltm-fs-2);
   display: block;
   text-decoration: none;
}
.topnav #myLinks a:hover { background: var(--nltm-primary-soft); color: var(--nltm-primary-deep); }

/* ---------- Option checkbox row ---------- */

.nltm-check {
   display: inline-flex;
   align-items: center;
   gap: var(--nltm-sp-2);
   font-size: var(--nltm-fs-2);
   color: var(--nltm-ink);
   cursor: pointer;
}
.nltm-check input { accent-color: var(--nltm-primary); width: 1.05em; height: 1.05em; }

/* ---------- Framed canvas / image preview surface ---------- */

.nltm-canvas-frame {
   display: flex;
   justify-content: center;
   box-sizing: border-box; /* so a width:100% frame includes its own padding/border (no overflow) */
   padding: var(--nltm-sp-4);
   background: var(--nltm-surface-2);
   border: 1px solid var(--nltm-line);
   border-radius: var(--nltm-radius);
   box-shadow: var(--nltm-shadow-1) inset;
   overflow: auto;
}

/* ---------- Image drop target ----------
   Drag-and-drop / paste zone for image tools. Pair with
   .nltm-canvas-frame for the preview surface. Toggle .is-active
   from the tool's dragover/dragleave handlers; .nltm-dropzone-hint
   is the muted helper line beneath the target. */

.nltm-dropzone {
   border: 2px solid var(--nltm-line);
   border-radius: var(--nltm-radius-sm);
   transition: border-color 120ms ease, background-color 120ms ease;
}
.nltm-dropzone.is-active {
   border: 3px dashed var(--nltm-success);
   background-color: var(--nltm-surface-2);
}

.nltm-dropzone-hint {
   text-align: center;
   color: var(--nltm-muted);
   font-size: var(--nltm-fs-2);
   margin-top: var(--nltm-sp-3);
}

/* ---------- Centered content column ----------
   Keeps a tool's controls off the page edges. The gradient header
   (.nltm-tool-header) stays full-bleed; wrap the rest of the page in
   <main class="nltm-main">. */

.nltm-main {
   max-width: 1100px;
   margin: 0 auto;
   padding: var(--nltm-sp-6) var(--nltm-sp-5) var(--nltm-sp-8);
}

/* Opt a tool out of the centered reading column so a grid / canvas / wide
   table can use the full viewport width. Side padding still keeps content
   off the very edge. Add `is-wide` alongside `nltm-main`. */
.nltm-main.is-wide { max-width: none; }

/* Lead paragraph: a one-line "what this tool does" intro at the top of a
   tool, just under the header. Keep it to a sentence or two. */
.nltm-intro {
   max-width: 70ch;
   margin: 0 0 var(--nltm-sp-5);
   color: var(--nltm-muted);
   font-size: var(--nltm-fs-3);
}

/* ---------- Sample / feature showcase row ----------
   A "Try a sample:" label followed by .nltm-button.nltm-sample-btn
   buttons and a hand-lettered caption that updates per sample. See
   ExpandText / BinaryAttack for the SAMPLES + onSample(n) wiring. */

.nltm-samples {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--nltm-sp-3);
   margin: var(--nltm-sp-5) 0;
}
.nltm-samples-label {
   font-family: var(--nltm-font-display);
   font-style: italic;
   color: var(--nltm-muted);
}
.nltm-sample-btn {
   background: var(--nltm-surface);
   color: var(--nltm-primary-deep);
   border: 1px solid var(--nltm-line);
   box-shadow: var(--nltm-shadow-1);
}
.nltm-sample-btn:hover { background: var(--nltm-accent-soft); color: var(--nltm-primary-deep); }
.nltm-sample-caption {
   flex-basis: 100%;
   margin: var(--nltm-sp-1) 0 0;
   min-height: 1.4em;
   font-family: var(--nltm-font-hand);
   font-size: var(--nltm-fs-3);
   color: var(--nltm-accent);
}

/* ---------- Header action cluster (Help link, header sample buttons) ----------
   A right-aligned cluster of pills that lives INSIDE the gradient tool header
   (#FrameHeader.nltm-tool-header), beside the title. Two uses:
     - a Help link (or "← Back") pointing at a tool's dedicated help page;
     - "Try a sample" buttons on space-constrained tools (maps / big canvases /
       wide grids) that can't spare a .nltm-samples content row.
   Markup, placed as the last children of #FrameHeader:

      <div class="nltm-header-right">
         <span class="nltm-header-samples-label">Try a sample:</span>
         <button class="nltm-header-sample" onclick="onSample(1)">1 · …</button>
         …
         <a class="nltm-tool-help" href="help.html"><i class="fa fa-question-circle"></i> Help</a>
      </div>

   The header wraps the cluster below the title on narrow widths. The header has
   no caption slot, so route a per-sample caption into the tool's output/result
   area instead. The .nltm-tool-help link is #FrameHeader-qualified so it beats
   hamburgermenu.css's later-loaded `.topnav a` rule. */

#FrameHeader.nltm-tool-header { flex-wrap: wrap; }

.nltm-header-right {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: var(--nltm-sp-2);
   margin-left: auto;       /* push the cluster to the header's right edge */
   align-self: center;
}

.nltm-header-samples-label {
   font-family: var(--nltm-font-hand);
   font-size: var(--nltm-fs-3);
   color: var(--nltm-accent-soft);
   margin-right: var(--nltm-sp-1);
}

/* Translucent white-on-gradient pills. */
.nltm-header-sample,
#FrameHeader .nltm-tool-help {
   display: inline-flex;
   align-items: center;
   gap: var(--nltm-sp-2);
   color: #fdf6e7;
   background: rgba(255, 255, 255, 0.12);
   border: 1px solid rgba(253, 246, 231, 0.55);
   border-radius: var(--nltm-radius-sm);
   text-decoration: none;
   cursor: pointer;
}
.nltm-header-sample {
   padding: var(--nltm-sp-1) var(--nltm-sp-2);
   font: 600 var(--nltm-fs-1)/1 var(--nltm-font-body);
}
#FrameHeader .nltm-tool-help {
   padding: var(--nltm-sp-1) var(--nltm-sp-3);
   font: 600 var(--nltm-fs-2)/1 var(--nltm-font-body);
}
.nltm-header-sample:hover,
#FrameHeader .nltm-tool-help:hover {
   background: var(--nltm-accent);
   border-color: var(--nltm-accent);
   color: #fff;
}