/*
 * 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;
}
.ndt-field-public { background: #e6eef7; border-color: #c5d3e6; }
/* An OSU station is open: a site-year table, so the Season/Site switch, the site
   rows and the trial row go away. The year row stays (it picks the site-year) and the
   layer row stays for the drone flights, hidden by the controller in years without. */
.ndt.is-station .ndt-topbar-group.ndt-topbar-map-only,
.ndt.is-station .ndt-topbar-row[data-site-group],
.ndt.is-station .ndt-topbar-row[data-map-target="trialRow"] { display: none; }
.ndt-chip-flight { font-size: 0.72rem; padding: 0.12rem 0.45rem; }
.ndt-station-open { color: inherit; }
/* Station-only controls (the Summary view pill) show once a station is open. */
.ndt-station-only { display: none; }
.ndt.is-station .ndt-station-only { display: block; }
/* Summary view: the two rotations side by side, each a stack of cards. */
.ndt-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem 1.5rem; margin-top: 0.75rem; max-width: 64rem; }
.ndt-summary-col > .ndt-eonr-title { margin-bottom: 0.4rem; }
.ndt-summary-col .ndt-eonr, .ndt-summary-col .ndt-response { max-width: 24rem; margin-bottom: 1rem; }
/* A pill row inside a card header (the station response card's previous-crop pick). */
.ndt-card-toggle { margin: 0.1rem 0 0.45rem; }
.ndt-card-toggle .ndt-method-btn { font-size: 0.72rem; padding: 0.22rem 0.4rem; }
.ndt-year-ramp { display: inline-block; width: 3.2rem; height: 0.55rem; border-radius: 0.3rem; vertical-align: middle; }

/* 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-actions { display: inline-flex; gap: 0.4rem; }
.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); }
/* Prices set by hand: the pill whose rates are in use, outlined rather than filled. */
.ndt-chip.is-near { border-color: var(--ndt-accent); box-shadow: inset 0 0 0 1px var(--ndt-accent); 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; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.1rem; }
.ndt-rtn-note { margin-top: 0.4rem; font-size: 0.74rem; line-height: 1.25; min-height: 2.5em; color: #8a7d6a; }
.ndt-price-input { width: 2.9rem; font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; padding: 0.05rem 0.2rem; border: 1px solid var(--ndt-line); border-radius: 0.25rem; background: #fff; color: var(--ndt-ink); }
.ndt-price-input:focus { outline: none; border-color: var(--ndt-accent); }
.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; }
/* The year row in three labelled groups: historical, underway, next season. */
.ndt-year-group { display: flex; flex-direction: column; gap: 0.15rem; }
.ndt-year-group + .ndt-year-group { padding-left: 0.5rem; margin-left: 0.25rem; border-left: 1px solid var(--ndt-line); }
.ndt-year-group-label {
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: #a39679; white-space: nowrap; padding-left: 0.2rem;
}
.ndt-year-now .ndt-year-group-label { color: #B45309; }
.ndt-year-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
/* Underway: an amber dot, the season still in progress. */
.ndt-chip-now::before {
  content: ""; display: inline-block; width: 0.42rem; height: 0.42rem; border-radius: 50%;
  background: #D97706; margin-right: 0.3rem; vertical-align: 0.05em;
}

/* Key for the two block kinds on the guaranteed-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 guaranteed-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-resp-year-sep { border-top: 1px solid #e4dccb; margin: 0.9rem -0.2rem 0.8rem; }
.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; }
/* An estimated zone's figures read muted, the same signal as its dashed outline. */
.ndt-eonr-est .ndt-eonr-rec, .ndt-eonr-est .ndt-eonr-range { color: #7a6e5b; }
/* The trial never bracketed the optimum: say so where the number would have been. */
.ndt-eonr-censored { font-size: 1.05rem; font-weight: 700; color: #a4581c; line-height: 1.35; margin: 0.1rem 0 0.2rem; }
.ndt-eonr-censored-note { font-size: 0.84rem; color: #a4581c; margin-top: 0.3rem; }
/* Sufficiency tiers: the rate that covers the optimum in X% of years. Four rows,
   figures on a common digit width, read down as a ladder. */
.ndt-tiers { width: 100%; border-collapse: collapse; margin-top: 0.5rem; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.ndt-tiers th { font-size: 0.74rem; font-weight: 600; color: #8a7d6a; text-transform: uppercase; letter-spacing: 0.04em; text-align: right; padding: 0 0.2rem 0.25rem; border-bottom: 1px solid var(--ndt-line); }
.ndt-tiers th:first-child, .ndt-tiers td:first-child { text-align: left; }
.ndt-tiers td { text-align: right; padding: 0.22rem 0.2rem; border-bottom: 1px solid #efe9dc; color: var(--ndt-ink); }
.ndt-tiers td:nth-child(2) { font-weight: 700; }
.ndt-tiers td:nth-child(3) { color: #7a6e5b; }
.ndt-tiers tr:last-child td { border-bottom: 0; }
/* Station reference: one row per station, a tick per observed site-year. The
   borrowed station is drawn in ink, the others muted, so the pool reads at a glance. */
.ndt-station-row { margin-top: 0.45rem; }
.ndt-station-head { font-size: 0.86rem; color: #7a6e5b; display: flex; align-items: center; gap: 0.4rem; }
.ndt-station-row.is-pool .ndt-station-head { color: var(--ndt-ink); font-weight: 600; }
.ndt-station svg { display: block; width: 100%; height: auto; }

/* 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; }

/* Timeline view. The map shrinks to an inset in the top-left corner and the
   season runs underneath it: title, checkboxes and note beside the inset, the
   chart full width below. */
.ndt-timeline {
  flex: 1; min-height: 0; overflow-y: auto; position: relative;
  padding: 0.75rem 1.25rem 1rem; background: var(--ndt-bg);
}
.ndt-timeline-head { margin-left: 21rem; min-height: 13.5rem; }
/* Layer and trial rows drive map overlays; in the timeline they only made the
   bar change height from year to year, so they sit out. */
.ndt.is-timeline .ndt-topbar-map-only { display: none; }
/* Site mode: the year, layer and trial rows belong to a season and go away. */
.ndt-topbar-row[hidden] { display: none; }
.ndt-timeline-head .ndt-eonr-title { font-size: 1.1rem; }
.ndt.is-timeline .ndt-map {
  position: absolute; top: calc(var(--ndt-topbar-h, 5.4rem) + 0.75rem); left: 0.75rem; z-index: 21;
  width: 20rem; height: 13.5rem; flex: none;
  border: 1px solid var(--ndt-line); border-radius: 0.6rem; overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.14); background: #fff;
}
@media (max-width: 768px) {
  .ndt-timeline-head { margin-left: 0; padding-top: 12rem; min-height: 0; }
  .ndt.is-timeline .ndt-map { width: 14rem; height: 10.5rem; }
}
/* Each item has a checkbox, and the checkbox row is the legend, so a line key
   sits beside every label. */
.ndt-bal-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.9rem;
  margin: 0.2rem 0 0.45rem; color: var(--ndt-ink);
}
.ndt-bal-group {
  width: 100%; margin-top: 0.3rem; font-size: 0.74rem; font-weight: 600; color: #8a7d6a;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ndt-bal-controls .ndt-check { font-size: 0.9rem; gap: 0.35rem; }
.ndt-bal-key { width: 1rem; height: 2px; border-radius: 1px; flex-shrink: 0; }
.ndt-bal-key--bar { width: 0.35rem; height: 0.8rem; }
.ndt-bal-key--band { height: 0.6rem; opacity: 0.45; }
.ndt-bal-key--event { width: 0; height: 0.9rem; border-left: 2px dashed #2f9e44; }
.ndt-bal-svg { display: block; width: 100%; height: auto; margin-top: 0.5rem; }
.ndt-bal-note { font-size: 0.84rem; color: #7a6e5b; margin-top: 0.45rem; line-height: 1.4; }
.ndt-bal-tipkey { width: 0.9rem; height: 2px; flex-shrink: 0; }
.ndt-timeline .ndt-loss-tip { top: 0; }

/* Cost & guarantee: 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; }
/* View and Layers share the top row; each group is label + toggle, with a
   hairline between them. In the timeline the Layers group hides, leaving View
   alone on the left. */
.ndt-topbar-group { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.ndt-topbar-group + .ndt-topbar-group { margin-left: 0.75rem; padding-left: 1rem; border-left: 1px solid var(--ndt-line); }
.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; }
/* A row that runs out of room scrolls; its chips keep their width and one line. */
.ndt-topbar-row .ndt-tier > .ndt-chip { flex-shrink: 0; white-space: nowrap; }
.ndt-trial-tier { align-items: center; gap: 0.75rem; }
.ndt-check--inline { margin: 0; white-space: nowrap; }
.ndt-topbar .ndt-trial-legend { margin: 0; flex-wrap: nowrap; white-space: nowrap; }
.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); }
}


/* ---- Welcome card (first visit; the header "?" reopens it) ---- */
.ndt-help-btn {
  margin-left: auto; align-self: center; flex-shrink: 0; cursor: pointer;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  border: 1px solid var(--ndt-line); background: #fff; color: var(--ndt-ink);
  font-weight: 700; font-size: 0.95rem; line-height: 1;
}
.ndt-help-btn:hover, .ndt-help-btn:focus-visible { border-color: var(--ndt-accent); color: var(--ndt-accent); }

/* Non-modal (the page stays usable), so it isn't in the top layer: fixed and
   raised by hand, centred by default; place() moves it below the topbar. */
.ndt-welcome {
  position: fixed; inset: 0; margin: auto; z-index: 1001; height: fit-content;
  width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto;
  container-type: inline-size;
  transition: opacity 0.2s ease;
  padding: 0; border: 1px solid var(--ndt-line); border-radius: 0.75rem;
  background: #fff; color: var(--ndt-ink);
  box-shadow: 0 12px 40px rgba(44, 33, 26, 0.25);
}
.ndt-welcome-body { padding: 1.5rem 1.6rem 1.25rem; }
.ndt-welcome h2 { margin: 0; font-size: 1.45rem; line-height: 1.2; }
.ndt-welcome-head {
  position: sticky; top: 0; z-index: 1;
  margin: 0 -1.6rem 0.9rem; padding: 0 1.6rem;
  background: #fff; border-bottom: 1px solid var(--ndt-line);
}
.ndt-welcome-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.ndt-welcome-tabs { display: flex; gap: 0.25rem; padding-top: 0.6rem; }
.ndt-welcome-tab {
  flex: 1; cursor: pointer; padding: 0.45rem 0.4rem 0.55rem; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: none; color: #8a7d6a;
  font-size: 0.8rem; font-weight: 600; line-height: 1.25; text-align: center;
}
.ndt-welcome-tab:hover { color: var(--ndt-ink); }
.ndt-welcome-tab.is-active { color: var(--ndt-accent); border-bottom-color: var(--ndt-accent); }
.ndt-welcome-notrial {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
  margin: 0 0 0.9rem; padding: 0.6rem 0.75rem; border-radius: 0.5rem;
  background: #FBF3E4; border: 1px solid #EAD9B8; font-size: 0.85rem;
}
.ndt-welcome-switch {
  cursor: pointer; padding: 0.3rem 0.65rem; border-radius: 0.4rem; font-size: 0.82rem; font-weight: 600;
  border: 1px solid var(--ndt-accent); background: #fff; color: var(--ndt-accent);
}
.ndt-welcome-go-sm { padding: 0.35rem 0.75rem; font-size: 0.82rem; margin-top: 0.15rem; }
.ndt-welcome-lead { margin: 0 0 1.1rem; color: #5a4d40; line-height: 1.5; }
.ndt-welcome-steps {
  margin: 0 0 1.25rem; padding: 0; list-style: none; counter-reset: step;
  display: grid; gap: 0.75rem;
}
.ndt-welcome-steps li {
  counter-increment: step; position: relative; padding-left: 2.2rem;
  font-size: 0.92rem; line-height: 1.45;
}
.ndt-welcome-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0.05rem;
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: #F2F0E4; color: var(--ndt-accent); font-weight: 700; font-size: 0.8rem;
}
.ndt-welcome-steps strong { display: block; }
.ndt-welcome-steps span { color: #5a4d40; }
.ndt-welcome-mobile { display: none; }
.ndt-welcome-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: 1rem; border-top: 1px solid var(--ndt-line);
  font-size: 0.82rem; color: #8a7d6a;
}
.ndt-welcome-go {
  flex-shrink: 0; cursor: pointer; padding: 0.55rem 1.1rem; border-radius: 0.45rem;
  border: 1px solid var(--ndt-accent); background: var(--ndt-accent); color: #fff; font-weight: 600;
}
.ndt-welcome-go:hover { filter: brightness(1.08); }
@media (max-width: 768px) {
  .ndt-welcome-mobile { display: inline; }
  .ndt-welcome-body { padding: 1.2rem 1.1rem 1rem; }
  .ndt-welcome-head { margin: 0 -1.1rem 0.9rem; padding: 0 1.1rem; }
  .ndt-welcome-foot { flex-direction: column; align-items: stretch; text-align: center; }
}
.ndt-welcome h2:focus { outline: none; }

.ndt-welcome-h3 {
  margin: 0 0 0.3rem; padding-top: 1rem; border-top: 1px solid var(--ndt-line);
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: #8a7d6a;
}
.ndt-welcome-note { margin: 0 0 0.8rem; font-size: 0.88rem; line-height: 1.45; color: #5a4d40; }
.ndt-welcome-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.25rem;
}
.ndt-welcome-cards section {
  padding: 0.75rem 0.85rem; border: 1px solid var(--ndt-line); border-radius: 0.5rem; background: #FDFBF6;
}
.ndt-welcome-cards h4 {
  margin: 0 0 0.5rem; font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; color: var(--ndt-accent);
}
.ndt-welcome-cards dl { margin: 0; display: grid; gap: 0.15rem; }
.ndt-welcome-cards dt { font-size: 0.84rem; font-weight: 600; margin-top: 0.4rem; }
.ndt-welcome-cards dt:first-child { margin-top: 0; }
.ndt-welcome-cards dd { margin: 0; font-size: 0.82rem; line-height: 1.4; color: #5a4d40; }
@container (max-width: 520px) { .ndt-welcome-cards { grid-template-columns: 1fr; } }

/* Spotlight: while a line of the welcome card is hovered, dim everything but
   the thing it describes. Clicks pass through; the card sits above it. */
.ndt-welcome-spot {
  position: fixed; z-index: 1000; pointer-events: none;
  border-radius: 0.5rem; outline: 3px solid var(--ndt-accent); outline-offset: 2px;
  box-shadow: 0 0 0 200vmax rgba(44, 33, 26, 0.35);
  transition: left 0.15s ease, top 0.15s ease, width 0.15s ease, height 0.15s ease;
}
.ndt-welcome [data-spot] { border-radius: 0.4rem; transition: background 0.1s; cursor: default; }
.ndt-welcome [data-spot]:hover { background: #F2F0E4; }
.ndt-welcome-steps li[data-spot] { padding-top: 0.2rem; padding-bottom: 0.2rem; margin: -0.2rem 0; }
.ndt-welcome-cards dl > div { padding: 0.2rem 0.3rem; margin: 0 -0.3rem; }
@media (prefers-reduced-motion: reduce) { .ndt-welcome-spot { transition: none; } }
/* Faded while the page underneath is being worked; pointing at it restores it. */
.ndt-welcome.is-faded { opacity: 0.3; }
@container (max-width: 420px) { .ndt-welcome h2 { font-size: 1.2rem; } }

/* The cards column docks from just under the topbar's first row, so the rows
   below it (Year, Layer, the site rows) would run underneath it. While it shows,
   those rows stop short of it and wrap instead (470px cards + grip + gaps);
   with the cards tucked away only the grip is in the way, and in the timeline
   (dock hidden) nothing is. Desktop only: on a phone the column overlays the map. */
@media (min-width: 769px) {
  .ndt:has(.ndt-cards-dock:not([hidden]) .ndt-cards:not([hidden])) .ndt-topbar-row + .ndt-topbar-row {
    padding-right: calc(470px + 2.85rem);
  }
  .ndt:has(.ndt-cards-dock:not([hidden]) .ndt-cards[hidden]) .ndt-topbar-row + .ndt-topbar-row {
    padding-right: 2.6rem;
  }
}