/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Served from this machine, not from a CDN. A webfont request carries the
   reader's IP and the page they are on to whoever serves it, and every other
   byte here comes off this box. Both are variable fonts, so one file covers
   every weight the app uses.
 *
 * `swap` because the alternative is text that is invisible while the font
 * loads, and this is opened on a phone at the edge of a field. */
@font-face {
  font-family: "Inter var";
  src: url("/assets/Inter-latin-1f021a24.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display var";
  src: url("/assets/PlayfairDisplay-latin-759b7dc1.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Headlines are set in a serif with real contrast between thick and thin,
     which is what makes a page of figures read as a document rather than a
     dashboard. Body text is Inter, drawn for screens, with tabular figures
     available — the recommendations and loss figures are numbers read side by
     side. Matches finance-tracker and health-tracker. */
  --font-body: "Inter var", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Playfair Display var", Georgia, "Times New Roman", serif;
}

:root {
  --ndt-bg: #FBF7EE;
  --ndt-ink: #2C211A;
  --ndt-line: #E3D9C6;
  --ndt-accent: #6E7C4C;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  color: var(--ndt-ink);
  background: var(--ndt-bg);
}

/* Form controls do not inherit the page's font — that is the browser's default,
   not something we chose — so an input or button drew in Helvetica or Segoe UI
   while everything around it was Inter. Individual controls below already opt
   back in one at a time; set here too, so a control added later cannot forget. */
button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
}

/* Page and section titles, in the display face. */
h1, h2, h3 { font-family: var(--font-display); }

.ndt { display: flex; flex-direction: column; height: 100vh; }

.ndt-header {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--ndt-line);
  background: #fff;
}
/* The wordmark, and the one place the display face appears in the app proper.
   Every other title on this screen is a small uppercase label — a serif reads
   as a mistake at that size — so the name in the header carries it alone.

   1.3rem where the sans was 1.05rem. Playfair has a much shorter x-height than
   Inter, so the name lost apparent size the moment it changed face even though
   the font-size had not moved: same number, visibly smaller word. 1.2rem draws
   level with the old sans; this goes a step past it, because the wordmark is
   the only display type on the screen and it should read as a name rather than
   as one more label in the bar. */
.ndt-brand {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
}
/* The monogram is a mark, not a word: it stays in the body face, where the N is
   drawn to sit square in its tile rather than on a serif's stems. */
.ndt-mark {
  display: inline-grid; place-items: center;
  width: 1.6rem; height: 1.6rem; border-radius: 0.4rem;
  background: var(--ndt-accent); color: #fff;
  font-family: var(--font-body); font-weight: 800;
}
.ndt-sub { color: #8a7d6a; font-size: 0.85rem; }

.ndt-hamburger {
  display: none; place-items: center; cursor: pointer; background: none;
  border: none; padding: 0.4rem; margin-right: 0.25rem; color: var(--ndt-ink); border-radius: 0.4rem;
}
.ndt-hamburger:hover { background: #f0ece1; }
.ndt-hamburger svg { width: 1.4rem; height: 1.4rem; }

.ndt-pane-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 44; }

.ndt-pane-account {
  margin-top: auto; padding-top: 1rem;
  border-top: 1px solid var(--ndt-line);
  display: flex; flex-direction: column; gap: 0.4rem;
}
.ndt-menu-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: #8a7d6a; }
.ndt-menu-email { font-size: 0.85rem; color: #8a7d6a; margin-bottom: 0.3rem; word-break: break-all; }
.ndt-menu-item {
  display: block; width: 100%; text-align: left; padding: 0.5rem 0.6rem; font: inherit;
  border: 1px solid var(--ndt-line); border-radius: 0.5rem; background: #fff; color: inherit;
  text-decoration: none; cursor: pointer;
}
.ndt-menu-item:hover { border-color: var(--ndt-accent); }
.ndt-menu-signout { color: #b3402f; }
.ndt-settings-section { margin: 1rem 0; }
/* Demo anonymisation toggle — lives on the settings page, admin only. */
.ndt-anon { margin-top: 0.5rem; }
.ndt-anon form { display: inline; }
.ndt-anon .is-on { background: #eef2e4; border-color: var(--ndt-accent); font-weight: 600; }

.ndt-body { display: flex; flex: 1; min-height: 0; }

.ndt-pane {
  width: 260px; flex-shrink: 0;
  border-right: 1px solid var(--ndt-line);
  background: #fff;
  padding: 1rem; overflow-y: auto;
  display: flex; flex-direction: column;
}
/* An h2 by markup, but a label by role: 0.75rem, uppercase, tracked out, above
   the field list it names. The display face is for titles that are read as
   titles — at this size in caps a serif just looks like a mistake — so this one
   opts back into the body font. */
.ndt-pane-title {
  font-family: var(--font-body);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: #8a7d6a; margin: 0 0 0.5rem;
}
.ndt-field-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.ndt-field-btn {
  width: 100%; text-align: left; cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem;
  padding: 0.55rem 0.7rem; border: 1px solid var(--ndt-line); border-radius: 0.5rem;
  background: #fff; color: inherit; font: inherit;
}
.ndt-field-btn:hover { border-color: var(--ndt-accent); }
.ndt-field-empty { font-size: 0.85rem; color: #8a7d6a; line-height: 1.45; }
/* Owning farm, shown only when the list spans more than one. */
.ndt-field-group {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: #8a7d6a; margin: 0.7rem 0 0.3rem; display: flex; align-items: center; gap: 0.35rem;
}
.ndt-field-group:first-of-type { margin-top: 0.2rem; }
.ndt-field-shared {
  text-transform: none; letter-spacing: 0; font-size: 0.65rem;
  background: #eef2e4; border: 1px solid #d5dcc2; border-radius: 0.6rem; padding: 0 0.35rem;
}

/* Settings → Access */
.ndt-access { max-width: 40rem; }
.ndt-access-sub { font-size: 0.8rem; font-weight: 700; margin: 0.9rem 0 0.35rem; }
.ndt-access-note { font-size: 0.82rem; color: #8a7d6a; margin: 0.2rem 0 0.4rem; line-height: 1.45; }
.ndt-access-empty { font-size: 0.85rem; color: #8a7d6a; margin: 0.2rem 0; }
.ndt-access-list { list-style: none; margin: 0.3rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.ndt-access-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.45rem 0.6rem; border: 1px solid var(--ndt-line); border-radius: 0.5rem;
  background: #fff; font-size: 0.88rem;
}
.ndt-access-pending { opacity: 0.75; }
.ndt-access-role {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: #8a7d6a;
  border: 1px solid var(--ndt-line); border-radius: 0.6rem; padding: 0 0.35rem; margin-left: 0.3rem;
}
.ndt-access-form { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; align-items: center; }
.ndt-access-form form { display: contents; }
.ndt-access-input, .ndt-access-select {
  font: inherit; font-size: 0.88rem; padding: 0.35rem 0.5rem;
  border: 1px solid var(--ndt-line); border-radius: 0.5rem; background: #fff; color: inherit;
}
.ndt-access-input { flex: 1; min-width: 12rem; }
.ndt-access-btn {
  font: inherit; font-size: 0.82rem; cursor: pointer; white-space: nowrap;
  padding: 0.35rem 0.7rem; border: 1px solid var(--ndt-line); border-radius: 0.5rem;
  background: #fff; color: inherit;
}
.ndt-access-btn:hover { border-color: var(--ndt-accent); }
.ndt-access-btn-danger { color: #b3402f; }
.ndt-access-btn-danger:hover { border-color: #b3402f; }
.ndt-field-btn.is-active { border-color: var(--ndt-accent); background: #F2F0E4; font-weight: 600; }
.ndt-field-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndt-field-zones { color: #8a7d6a; font-size: 0.8rem; flex-shrink: 0; }

.ndt-method { margin-top: 1rem; }
.ndt-method-toggle { display: flex; gap: 0.25rem; }
.ndt-method-btn {
  flex: 1; cursor: pointer; font: inherit; font-size: 0.8rem;
  padding: 0.4rem 0.5rem; border: 1px solid var(--ndt-line); border-radius: 0.4rem;
  background: #fff; color: inherit;
}
.ndt-method-btn:hover { border-color: var(--ndt-accent); }
.ndt-method-btn.is-active { background: var(--ndt-accent); color: #fff; border-color: var(--ndt-accent); }

.ndt-layers { margin-top: 1rem; }
.ndt-tier { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.6rem; }
.ndt-chip {
  cursor: pointer; font: inherit; font-size: 0.78rem;
  padding: 0.3rem 0.55rem; border: 1px solid var(--ndt-line); border-radius: 1rem;
  background: #fff; color: inherit;
}
.ndt-chip:hover { border-color: var(--ndt-accent); }
.ndt-chip.is-active { background: var(--ndt-accent); color: #fff; border-color: var(--ndt-accent); }
.ndt-tier:empty::before { content: "—"; color: #c4b89f; font-size: 0.8rem; }

.ndt-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; margin: 0.3rem 0 0.6rem; cursor: pointer; }

.ndt-trial-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.75rem; margin: -0.2rem 0 0.6rem; }
.ndt-trial-title { width: 100%; color: #8a7d6a; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
.ndt-trial-item { display: inline-flex; align-items: center; gap: 0.3rem; }
.ndt-trial-dot { width: 0.75rem; height: 0.75rem; border-radius: 0.2rem; border: 1px solid rgba(0,0,0,0.25); display: inline-block; }
.ndt-trial-blanket { color: #8a7d6a; }

.ndt-rtn { margin: 0.3rem 0 0.6rem; padding: 0.6rem; border: 1px solid var(--ndt-line); border-radius: 0.5rem; background: #F7F3E8; }
.ndt-rtn .ndt-pane-title { margin-bottom: 0.4rem; }
.ndt-rtn .ndt-tier { margin-bottom: 0.4rem; }
.ndt-rtn-row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; margin-top: 0.35rem; }
.ndt-rtn-row > span:first-child { width: 3.2rem; color: #8a7d6a; }
.ndt-rtn-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.ndt-step {
  cursor: pointer; font: inherit; line-height: 1; width: 1.5rem; height: 1.5rem;
  border: 1px solid var(--ndt-line); border-radius: 0.3rem; background: #fff; color: inherit;
}
.ndt-step:hover { border-color: var(--ndt-accent); }

.ndt-legend { margin-top: 0.3rem; }
.ndt-legend-bar { height: 0.6rem; border-radius: 0.3rem; border: 1px solid rgba(0,0,0,0.1); }
.ndt-legend-row { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.72rem; color: #8a7d6a; margin-top: 0.2rem; }
.ndt-legend-row span:nth-child(2) { text-align: center; flex: 1; }
.ndt-legend-note { font-size: 0.72rem; color: #7a6e5b; margin-top: 0.25rem; line-height: 1.35; }
.ndt-legend-note b { color: var(--ndt-ink); font-weight: 700; }
/* Matches the dashed outline the map draws on estimated zones. */
.ndt-rx-dash {
  display: inline-block; width: 1.4rem; vertical-align: middle; margin-left: 0.15rem;
  border-top: 1.5px dashed rgba(44,33,26,0.55);
}
/* Forward (prescription) year — no measured data behind it. */
.ndt-chip-fwd { border-style: dashed; }

/* Key for the two block kinds on the insured-rate layer; swatches match the
   map's block styles (solid crimson check, solid blue learning). */
.ndt-legend-key {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1rem;
  font-size: 0.88rem; color: var(--ndt-ink); margin-top: 0.4rem;
}
.ndt-legend-key > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.ndt-blk { display: inline-block; width: 1.5rem; height: 0.9rem; border-radius: 2px; flex-shrink: 0; }
.ndt-blk-check { background: rgba(44,33,26,0.45); border: 2px solid #e11d48; }
/* Body carries the insured-rate ramp: a learning block is filled with its own
   rate's color, so the swatch wears the whole colorbar. */
.ndt-blk-learn {
  background: linear-gradient(to right, #ffffd4, #fed98e, #fe9929, #d95f0e, #993404);
  border: 2px solid #2563eb;
}

.ndt-info {
  margin-top: 1rem; display: flex; gap: 0.6rem; align-items: center;
  padding: 0.7rem; border: 1px solid var(--ndt-line); border-radius: 0.5rem; background: #F7F3E8;
}
.ndt-info-swatch { width: 1.4rem; height: 1.4rem; border-radius: 0.3rem; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.1); }
.ndt-info-label { font-weight: 600; }
.ndt-info-meta { color: #8a7d6a; font-size: 0.85rem; }

.ndt-signout {
  margin-left: auto; cursor: pointer; font: inherit; font-size: 0.8rem;
  padding: 0.35rem 0.7rem; border: 1px solid var(--ndt-line); border-radius: 0.4rem;
  background: #fff; color: inherit;
}
.ndt-signout:hover { border-color: var(--ndt-accent); }

.ndt-auth { max-width: 22rem; margin: 4rem auto; padding: 1.5rem; }
.ndt-auth h1 { font-size: 1.2rem; margin: 0 0 1rem; }
.ndt-auth-form { display: flex; flex-direction: column; gap: 0.75rem; }
.ndt-auth-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.ndt-auth-form input { padding: 0.5rem; border: 1px solid var(--ndt-line); border-radius: 0.4rem; font: inherit; }
.ndt-auth-btn {
  margin-top: 0.5rem; cursor: pointer; font: inherit; font-weight: 600;
  padding: 0.55rem; border: none; border-radius: 0.4rem; background: var(--ndt-accent); color: #fff;
}
.ndt-auth-link { font-size: 0.85rem; margin-top: 1rem; color: #8a7d6a; }
.ndt-auth-alert { color: #b3402f; font-size: 0.85rem; }
.ndt-auth-notice { color: var(--ndt-accent); font-size: 0.85rem; }

.ndt-map-area { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }

/* Info cards dock, pinned top-right over the map. The grip on its shoulder
   slides the whole column away and back. The dock itself ignores the pointer
   so the map stays clickable everywhere the cards aren't; the grip and the
   card column opt back in. */
.ndt-cards-dock {
  position: absolute; top: 4.35rem; right: 0.75rem; bottom: 0.75rem; z-index: 20;
  display: flex; align-items: flex-start; gap: 0.5rem;
  max-width: calc(100% - 1.5rem);
  pointer-events: none;
}
.ndt-cards-grip {
  flex-shrink: 0; pointer-events: auto; cursor: pointer;
  width: 1.6rem; height: 3.4rem; padding: 0;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.96); backdrop-filter: blur(2px);
  border: 1px solid var(--ndt-line); border-radius: 0.6rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.14);
  color: #6b5f4c;
}
.ndt-cards-grip:hover { color: var(--ndt-ink); }
/* Open, the chevron points at the edge the cards retreat to; closed, back at the map. */
.ndt-cards-grip svg { display: block; transition: transform 0.15s ease; }
.ndt-cards-grip.is-closed svg { transform: rotate(180deg); }
/* The column scrolls when the cards outrun the window (tablets, both cards on).
   It must be hit-testable to be touch-scrollable on iOS, so pointer-events:none is out. */
.ndt-cards {
  min-width: 0; max-height: 100%;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  display: flex; flex-direction: column; gap: 0.6rem;
  pointer-events: auto;
  scrollbar-width: thin; scrollbar-color: rgba(44,33,26,0.35) transparent;
}
.ndt-cards::-webkit-scrollbar { width: 9px; }
.ndt-cards::-webkit-scrollbar-track { background: transparent; }
.ndt-cards::-webkit-scrollbar-thumb {
  background: rgba(44,33,26,0.3); border-radius: 5px;
  border: 2px solid transparent; background-clip: content-box;
}
.ndt-eonr, .ndt-response {
  width: 100%; pointer-events: auto; flex-shrink: 0;  /* keep full height; the column scrolls */
  background: rgba(255,255,255,0.96); backdrop-filter: blur(2px);
  border: 1px solid var(--ndt-line); border-radius: 0.6rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.14);
  padding: 0.85rem 1rem 0.75rem;
}
/* The recommendations are read against each other — Response beside EONR,
   and both against the range below. Tabular figures keep the digits on a
   common width so the numbers line up instead of drifting. */
.ndt-resp-rec { font-size: 2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ndt-resp-rec .unit { font-size: 1rem; font-weight: 600; color: #8a7d6a; }
.ndt-resp-rec .lbl { font-size: 0.84rem; font-weight: 600; color: #8a7d6a; text-transform: uppercase; letter-spacing: 0.04em; }
.ndt-eonr-title {
  font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: #6b5f4c; display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.4rem;
}
.ndt-eonr-dot { width: 0.85rem; height: 0.85rem; border-radius: 50%; flex-shrink: 0; }

/* Chart hover readout. Fixed rather than absolute so it does not need a
   positioned ancestor and does not care which card raised it; pointer-events
   off so it can never sit between the cursor and the column it describes. */
.ndt-tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: #fff; border: 1px solid var(--ndt-line); border-radius: 0.45rem;
  box-shadow: 0 2px 10px rgba(44, 33, 26, 0.14);
  padding: 0.45rem 0.55rem; min-width: 11rem;
  font-size: 0.8rem; line-height: 1.35;
}
.ndt-tip-head {
  font-weight: 700; margin-bottom: 0.3rem;
  padding-bottom: 0.25rem; border-bottom: 1px solid var(--ndt-line);
}
.ndt-tip-row { display: flex; align-items: center; gap: 0.4rem; }
.ndt-tip-label { color: #6b5f4c; }
/* Pushed right and lined up on a common digit width — the rows are read as a
   column of figures, not as sentences. */
.ndt-tip-val { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.ndt-tip-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex-shrink: 0; }
/* Keeps the labels aligned on rows that have no series colour to show. */
.ndt-tip-dot--none { background: none; }
.ndt-eonr-rec { font-size: 2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ndt-eonr-rec .unit { font-size: 1rem; font-weight: 600; color: #8a7d6a; }
.ndt-eonr-rec .lbl { font-size: 0.84rem; font-weight: 600; color: #8a7d6a; text-transform: uppercase; letter-spacing: 0.04em; }
.ndt-eonr-range { font-size: 1.02rem; color: var(--ndt-ink); margin: 0.15rem 0 0.4rem; }
.ndt-eonr-range b { font-weight: 700; }
.ndt-eonr svg, .ndt-response svg { display: block; width: 100%; height: auto; }
.ndt-eonr-foot { font-size: 0.84rem; color: #7a6e5b; margin-top: 0.55rem; line-height: 1.4; }
.ndt-eonr-empty { font-size: 1rem; color: #7a6e5b; line-height: 1.5; padding: 0.5rem 0.1rem; }
.ndt-eonr-hint { font-size: 0.84rem; color: #7a6e5b; margin-top: 0.4rem; font-style: italic; }
.ndt-eonr-empty b { color: var(--ndt-ink); font-weight: 700; }

/* N-loss card: cumulative curves for both pathways, one summary row each. */
.ndt-loss-foot { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.35rem; }
.ndt-loss-row {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  font-size: 1.02rem; color: var(--ndt-ink);
}
.ndt-loss-row b { font-weight: 700; }
.ndt-loss-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; flex-shrink: 0; }
.ndt-loss-name { font-weight: 600; margin-right: 0.15rem; }
.ndt-loss-good { color: #2f7a37; }
.ndt-loss-bad { color: #b4451f; }

/* Legend sits above the plot; identity never rests on colour alone. */
.ndt-loss-legend {
  display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; margin: 0.1rem 0 0.35rem;
  font-size: 0.98rem; color: var(--ndt-ink);
}
.ndt-loss-key { display: inline-flex; align-items: center; gap: 0.4rem; }
.ndt-loss-key-muted { color: #7a6e5b; }
.ndt-loss-dash {
  width: 1.1rem; height: 0; border-top: 2px dashed #8a7d6a; flex-shrink: 0;
}

/* Crosshair readout — positioned against the card, which is the containing block. */
.ndt-response { position: relative; }
.ndt-loss-tip {
  position: absolute; top: 3.1rem; pointer-events: none; z-index: 5;
  background: rgba(255,255,255,0.97); border: 1px solid var(--ndt-line);
  border-radius: 0.4rem; padding: 0.4rem 0.55rem; font-size: 0.94rem;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12); line-height: 1.45; white-space: nowrap;
}
.ndt-loss-tip span { display: flex; align-items: center; gap: 0.35rem; }
.ndt-loss-tip b { font-weight: 700; }
.ndt-loss-hit { cursor: crosshair; }

/* Premium & protection: a small ledger, so the columns line up to be scanned. */
.ndt-econ { width: 100%; border-collapse: collapse; margin-top: 0.6rem; font-size: 0.94rem; }
.ndt-econ th { padding: 0 0 0.25rem; font-size: 0.8rem; font-weight: 600; color: #8a7d6a; text-align: right; }
.ndt-econ th:first-child { text-align: left; }
.ndt-econ td { padding: 0.3rem 0; border-bottom: 1px solid #efe9dc; vertical-align: baseline; }
.ndt-econ tr:last-child td { border-bottom: 0; }
.ndt-econ .num { text-align: right; white-space: nowrap; padding-left: 0.6rem; color: #7a6e5b; }
.ndt-econ .strong { color: var(--ndt-ink); font-weight: 700; }
.ndt-econ .good { color: #2f7a37; }
.ndt-econ .bad { color: #b4451f; }
.ndt-econ td .ndt-loss-dot { display: inline-block; margin-right: 0.4rem; vertical-align: baseline; }
/* The per-acre row is where the two columns add up — rule it off like a subtotal. */
.ndt-econ-total td { border-top: 1px solid #d9cfbb; padding-top: 0.35rem; }
.ndt-econ-net {
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  margin-top: 0.6rem; padding: 0.5rem 0.6rem;
  background: #eef4ea; border: 1px solid #cfdcc4; border-radius: 0.4rem;
}
.ndt-econ-net.is-cost { background: #f8ece8; border-color: #e6cabd; }
.ndt-econ-net b { font-size: 1.35rem; font-weight: 800; color: #2f7a37; }
.ndt-econ-net.is-cost b { color: #b4451f; }
.ndt-econ-net-field { color: #7a6e5b; font-size: 0.92rem; }




/* One column; the scope toggle at its head decides which group is shown. */
.ndt-cards { width: 470px; }
.ndt-card-col { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; }
.ndt-card-scope {
  display: flex; gap: 0.25rem; padding: 0.3rem; flex-shrink: 0;
  background: rgba(255,255,255,0.96); backdrop-filter: blur(2px);
  border: 1px solid var(--ndt-line); border-radius: 0.6rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.14);
}
.ndt-card-scope .ndt-method-btn { font-size: 0.84rem; padding: 0.42rem 0.5rem; }

@media (max-width: 768px) { .ndt-cards { width: 340px; } .ndt-cards-dock { top: 0.75rem; } }
.ndt-topbar {
  background: #fff; border-bottom: 1px solid var(--ndt-line);
  padding: 0.5rem 0.75rem; display: flex; flex-direction: column; gap: 0.35rem;
}
.ndt-topbar-row { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.ndt-topbar-label {
  flex-shrink: 0; width: 3rem; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: #8a7d6a;
}
.ndt-topbar-row .ndt-tier { flex-wrap: nowrap; overflow-x: auto; margin: 0; padding-bottom: 2px; }
.ndt-map { flex: 1; min-height: 0; min-width: 0; }
/* "zoom to field" control stacked just under the OL +/- zoom buttons */
.ndt-fit-control { top: 3.85em; left: .5em; }
/* On touch devices OL enlarges every control button (.ol-touch bumps their
   font-size 1.14em → 1.5em), so the +/- stack is taller there and 3.85em put
   this control on top of the "−" button. Same gap, below the taller stack. */
.ol-touch .ndt-fit-control { top: 5.25em; }
.ndt-fit-control button svg { display: block; margin: auto; }

/* Mobile: the left pane collapses into a slide-out drawer so the map gets the
   full width. The header hamburger toggles it; a backdrop dims the map. */
@media (max-width: 768px) {
  .ndt-hamburger { display: inline-grid; }
  .ndt-sub { display: none; }

  .ndt-pane {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 45;
    width: 84%; max-width: 320px;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
  }
  .ndt-pane.is-open { transform: translateX(0); }
}