:root {
  --green-dark: #1a5c2a;
  --green: #2d7a3a;
  --green-bg: #f0f5f0;
  --red: #c62828;
  --red-bg: #ffebee;
  --ok-bg: #e8f5e9;
  --ok: #2e7d32;
  --amber: #e65100;
  --amber-bg: #fff3e0;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--green-bg);
  font-family: 'Sora', system-ui, sans-serif;
  color: #222;
}

.container {
  max-width: none;
  margin: 0;
  padding: 1.2rem 2rem 3rem;
}

.app-header {
  background: linear-gradient(135deg, var(--green-dark), var(--green));
  color: #fff;
  padding: 1.4rem 2rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}
.app-header h1 { margin: 0; font-size: 1.8rem; }
.app-header p { margin: .3rem 0 0; opacity: .85; font-size: .88rem; }

.app-footer {
  margin-top: 2.5rem;
  text-align: center;
  font-size: .78rem;
  color: #9aa;
}

/* ---- Cards / sections ---- */
.card {
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--card-shadow);
  margin-bottom: 1.2rem;
}
.section-title { font-size: 1.05rem; font-weight: 700; color: var(--green-dark); margin: 0 0 1rem; }

/* ---- Forms ---- */
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .35rem; color: #444; }
.field .helptext { font-size: .75rem; color: #999; margin-top: .25rem; }
.field input[type="text"],
.field input[type="password"],
.field input[type="file"] {
  width: 100%;
  padding: .6rem .75rem;
  border: 1.5px solid #cfe3cf;
  border-radius: 8px;
  font-family: inherit;
  font-size: .9rem;
  background: #f9fdf9;
}
.field input[type="file"] {
  border: 2px dashed #a5d6a7;
  padding: 1rem;
  cursor: pointer;
}
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 760px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-family: inherit;
  font-size: .9rem;
  padding: .7rem 1.2rem;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); }
.btn-primary:disabled { background: #b6cdb6; cursor: not-allowed; }
.btn-secondary { background: #eef3ee; color: var(--green-dark); border: 1.5px solid #cfe3cf; }
.btn-secondary:hover { background: #e3ece3; }
.btn-block { display: block; width: 100%; }

/* ---- Alerts / banners ---- */
.banner { padding: 1rem 1.5rem; border-radius: 10px; margin-bottom: 1rem; }
.banner-risk { background: var(--red-bg); border: 2px solid var(--red); }
.banner-ok { background: var(--ok-bg); border: 2px solid var(--ok); }
.banner .title { font-size: 1.3rem; font-weight: 800; }
.banner-risk .title { color: var(--red); }
.banner-ok .title { color: var(--ok); }
.banner .sub { color: #555; font-size: .88rem; margin-top: .3rem; }

.msg-error { background: var(--red-bg); color: var(--red); border: 1px solid var(--red); padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .85rem; }
.msg-info { background: #e3f2fd; color: #1565c0; padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .85rem; }
.msg-warn { background: var(--amber-bg); color: var(--amber); padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .85rem; }

/* ---- Plot cards ---- */
.plot { background: #fff; border-radius: 10px; padding: 1rem 1.2rem; box-shadow: var(--card-shadow); margin-bottom: .8rem; }
.plot-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.plot-name { font-size: .98rem; font-weight: 700; color: var(--green-dark); }
.badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.badge { padding: .2rem .7rem; border-radius: 99px; font-weight: 700; font-size: .75rem; border: 1.5px solid; }
.badge-risk { background: var(--red-bg); color: var(--red); border-color: var(--red); }
.badge-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.badge-amber { background: var(--amber-bg); color: var(--amber); border-color: var(--amber); }
.badge-na { background: #f5f5f5; color: #888; border-color: #bbb; }
.plot-meta { font-size: .82rem; color: #555; line-height: 1.9; }
.plot-note { font-size: .74rem; color: #aaa; margin-top: .3rem; font-style: italic; }

/* ---- Per-system grid ---- */
details.breakdown { margin-top: .6rem; }
details.breakdown summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--green-dark); }
.sys-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: .7rem 0; }
.sys { border-radius: 8px; padding: .8rem; text-align: center; }
.sys-ok { background: var(--ok-bg); }
.sys-risk { background: var(--red-bg); }
.sys-na { background: #f5f5f5; }
.sys .lbl { font-weight: 700; font-size: .82rem; }
.sys .big { font-size: 1.5rem; font-weight: 800; }
.sys .sm { font-size: .72rem; color: #555; }

/* ---- Static plot map ---- */
.plot-map { margin-top: .7rem; }
.plot-map img { width: 100%; border-radius: 8px; display: block; }
.map-actions { display: flex; gap: .5rem; margin-top: .5rem; }
.map-actions .btn { flex: 1; }

/* ---- Interactive Leaflet map ---- */
#all-map { width: 85%; margin: 0 auto; aspect-ratio: 16 / 9; height: auto; border-radius: 12px; overflow: hidden; min-height: 300px; }
#edit-map { height: 70vh; min-height: 460px; width: 100%; border-radius: 12px; resize: vertical; overflow: hidden; }
.edit-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
@media (max-width: 760px) { .edit-actions .btn { flex: 1 1 100%; } }

/* ---- Editor: labelled map controls + inline polygon naming ---- */
/* Leaflet.draw and leaflet-control-geocoder both ship ICON-ONLY 26px buttons,
   and leaflet.draw's icon is one wide SPRITE STRIP cropped to that 26px. So
   widening the button to make room for a label un-cropped the strip and painted
   the whole thing — pentagon, rectangle, circle, marker, pencil, bin — stacked
   underneath the text. Cropping harder is not the fix (the strip also shifts
   position for disabled states): the fix is to stop using the sprite at all.
   edit.js replaces each button's contents with an inline SVG icon of our own
   plus a label span, and these rules lay the two out side by side as one
   ordinary button. The anchor itself — and therefore Leaflet's click handler —
   is untouched. */
.leaflet-draw-toolbar a.draw-btn-labelled,
.leaflet-control-geocoder-icon.geo-search-btn {
  background-image: none !important;
  background-color: #fff;
  width: auto !important;
  height: auto !important;
  min-height: 32px;
  display: flex !important;
  align-items: center;
  gap: .45rem;
  padding: .35rem .75rem;
  text-indent: 0;
  line-height: 1.2;
  white-space: nowrap;
}
.draw-btn-icon { display: block; flex: 0 0 16px; width: 16px; height: 16px;
  color: var(--green-dark); }
.draw-btn-icon svg { display: block; width: 16px; height: 16px; }
.draw-btn-label { font-size: .78rem; font-weight: 700; color: var(--green-dark);
  white-space: nowrap; }
/* Leaflet marks an unusable tool .leaflet-disabled; grey the icon with it. */
.leaflet-draw-toolbar a.leaflet-disabled .draw-btn-icon,
.leaflet-draw-toolbar a.leaflet-disabled .draw-btn-label { color: #bbb; }
/* The geocoder swaps the icon for its input when expanded — no label then. */
.leaflet-control-geocoder-expanded .geo-search-btn .draw-btn-label { display: none; }

.edit-map-wrap { position: relative; }
.draw-name-box {
  position: absolute; z-index: 900; left: 50%; transform: translateX(-50%);
  bottom: 1.2rem; background: #fff; border: 1.5px solid var(--green);
  border-radius: 4px; padding: .6rem .8rem; box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
}
.draw-name-box[hidden] { display: none; }
.draw-name-box label { display: block; font-size: .78rem; font-weight: 700;
  color: var(--green-dark); margin-bottom: .35rem; }
.draw-name-row { display: flex; gap: .4rem; align-items: center; }
.draw-name-row input { padding: .35rem .55rem; border: 1.5px solid #cfe3cf;
  border-radius: 2px; font-family: inherit; font-size: .85rem; min-width: 200px; }

/* List search box (companies / profiles / fields) */
.list-search-wrap { margin: 0 0 .7rem; }
.list-search { width: 100%; max-width: 420px; padding: .5rem .7rem; font-family: inherit;
  font-size: .9rem; border: 1.5px solid #cfe3cf; border-radius: 4px; background: #fff; }
.list-search:focus { outline: none; border-color: #28b428; }

/* Gmail-style pager (max 10 rows per list) — see paginate.js.
   TWO independent owners of row visibility, one class each, so filtering and
   paging never overwrite one another: .row-filtered belongs to search.js,
   .row-paged-out to paginate.js. A row is on screen iff it has neither. */
.row-filtered, .row-paged-out { display: none !important; }
.list-pager { display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; color: #667; white-space: nowrap; }
.list-pager[hidden] { display: none; }
.list-pager-range { margin-right: .15rem; }
.list-pager-btn {
  border: 1.5px solid #cfe3cf; background: #fff; color: var(--green-dark);
  border-radius: 6px; width: 24px; height: 24px; padding: 0;
  font-family: inherit; font-size: 1rem; line-height: 1; cursor: pointer;
}
.list-pager-btn:hover:not(:disabled) { background: #eef3ee; }
.list-pager-btn:disabled { opacity: .35; cursor: default; }
/* The pager sits top-RIGHT, above its list. `.list-pager-end` claims the free
   space in a flex row that has nothing else pushing right; `.list-pager-wrap`
   is the standalone row used where there is no search box to share with. */
.list-pager-end { margin-left: auto; }
.list-pager-wrap { display: flex; justify-content: flex-end; margin: 0 0 .5rem; }
.list-search-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* Click-to-sort headers (tables + field list) */
.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sort::after { content: " \2195"; opacity: .3; font-size: .8em; }       /* ↕ idle */
.th-sort[aria-sort="ascending"]::after { content: " \25B2"; opacity: .85; }  /* ▲ */
.th-sort[aria-sort="descending"]::after { content: " \25BC"; opacity: .85; } /* ▼ */
.field-row-head .th-sort:hover, .data-table th.th-sort:hover { color: #1e7a1e; }

/* GFW integrated-alerts comparison controls */
.gfw-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem;
  margin: 0 0 .7rem; padding: .6rem .8rem; border: 1.5px solid #e3d2dd;
  background: #fbf5f8; border-radius: 4px; font-size: .82rem; }
.gfw-controls-title { font-weight: 700; color: #b03a72; }
.gfw-controls label { display: inline-flex; align-items: center; gap: .35rem; }
.gfw-controls input[type="date"] { padding: .25rem .4rem; border: 1.5px solid #d8c2cf;
  border-radius: 4px; font-family: inherit; font-size: .8rem; }
.gfw-controls-note { flex: 1 1 100%; margin: 0; color: #7a6470; }

/* ---- Simplify panel ---- */
.simplify-panel {
  margin-top: .9rem;
  padding: .8rem 1rem;
  background: #f9fdf9;
  border: 1px solid #dce8dc;
  border-radius: 10px;
}
.simplify-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .55rem; }
.simplify-row:last-child { margin-bottom: 0; }
.simplify-label { font-size: .82rem; font-weight: 600; color: #555; }
.simplify-check { font-size: .82rem; color: #555; display: flex; align-items: center; gap: .35rem; margin-right: auto; }
.btn-sm { padding: .35rem .7rem; font-size: .8rem; }
#sel-status { margin: 0; }
.alerts-input { padding: .35rem .55rem; border: 1.5px solid #cfe3cf; border-radius: 7px;
  font-family: inherit; font-size: .8rem; background: #fff; }
#alerts-msg { margin-top: .2rem; }
.map-legend {
  background: rgba(255, 255, 255, .92);
  padding: .55rem .7rem;
  border-radius: 8px;
  font-size: .76rem;
  line-height: 1.7;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.map-legend .row { display: flex; align-items: center; gap: .4rem; }
.map-legend .swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,.2); }
.map-legend .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1px solid #fff; }
.forest-layer-warning {
  max-width: 310px;
  padding: .55rem .7rem;
  border: 1px solid var(--amber);
  background: rgba(255, 248, 225, .96);
  color: #6d4c00;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  font-size: .75rem;
  line-height: 1.4;
}
.forest-layer-warning strong { display: block; margin-bottom: .15rem; }
/* "Legend" collapse pill — mobile only; desktop keeps the always-open legend. */
.map-legend .legend-toggle { display: none; }

@media (max-width: 760px) {
  /* Legend collapses behind a pill; expanded state stays compact. */
  .map-legend { font-size: .68rem; padding: .4rem .55rem; max-width: 74vw; }
  .map-legend .legend-toggle { display: inline-block; padding: .55rem .9rem; min-height: 40px;
    border: 1px solid #b8ccb8; border-radius: 999px !important; background: #fff;
    font: inherit; font-size: .72rem; font-weight: 700; color: var(--green-dark); cursor: pointer; }
  .map-legend:not(.open) { background: transparent; box-shadow: none; padding: 0; border: 0; }
  .map-legend:not(.open) .legend-rows { display: none; }
  .map-legend.open .legend-toggle { margin-bottom: .35rem; }
  .map-legend .row { gap: .3rem; line-height: 1.35; }
  .map-legend .swatch { width: 11px; height: 11px; }
  .map-legend .dot { width: 9px; height: 9px; }

  /* GFW comparison panel: stack vertically so it doesn't tower over the map. */
  .gfw-controls { flex-direction: column; align-items: stretch; gap: .35rem; }

  /* 40px+ touch targets: zoom +/- and the collapsed layers icon. */
  .leaflet-control-zoom a { width: 40px !important; height: 40px !important;
    line-height: 40px !important; font-size: 20px; }
  .leaflet-control-layers-toggle { width: 40px !important; height: 40px !important;
    background-size: 24px 24px; }
}

/* ---- DDS table ---- */
.dds-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.dds-table td { padding: .45rem 1rem; border-bottom: 1px solid #f0f0f0; }
.dds-table td.k { background: #f9fdf9; font-weight: 600; color: #555; border-right: 1px solid #f0f0f0; width: 44%; }
.dds-verdict { padding: .75rem 1rem; border-radius: 7px; font-weight: 700; font-size: .88rem; margin-bottom: 1rem; }
.dds-sign { margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.dds-sign div { border-top: 1px solid #bbb; padding-top: .5rem; font-size: .78rem; color: #999; }

.divider { border: none; border-top: 1px solid #dde7dd; margin: 1.6rem 0; }

/* ---- Progress bar ---- */
.progress-wrap { margin: .2rem 0; }
.prog-status { margin: 0 0 .5rem; }
.progress {
  width: 100%;
  height: 14px;
  background: #e3ece3;
  border-radius: 99px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--green), var(--green-dark));
  border-radius: 99px;
  transition: width .4s ease;
}
.progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  color: #667;
  margin-top: .4rem;
}
.progress-meta .prog-pct { font-weight: 700; color: var(--green-dark); }

/* Indeterminate: work has started but there is nothing to measure yet, so a
   short bar slides across the empty track (same read as the per-row .indet
   used while a single field analyses). progress.js drops the class on the
   first real update and the normal filled bar takes over. */
.progress.indeterminate { position: relative; }
.progress.indeterminate .progress-bar {
  position: absolute;
  top: 0;
  left: -38%;
  width: 38%;
  transition: none;
  animation: prog-indet 1.15s infinite linear;
}
@keyframes prog-indet { 0% { left: -38%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  /* No sliding — a static part-filled track still says "busy". */
  .progress.indeterminate .progress-bar { animation: none; left: 0; opacity: .55; }
}

/* ============ Traceability UI ============ */
.app-nav { margin-top:.8rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.app-nav a { color:#fff; text-decoration:none; font-size:.82rem; font-weight:700;
  padding:.45rem 1rem; border:2px solid rgba(255,255,255,.75); background:rgba(255,255,255,.08); }
.app-nav a:hover { background:#fff; color:var(--green-dark); }
.nav-logout { color:#fff; font-family:inherit; font-size:.82rem; font-weight:700; cursor:pointer;
  padding:.45rem 1rem; border:2px solid rgba(255,255,255,.75); background:rgba(255,255,255,.08); }
.nav-logout:hover { background:#fff; color:var(--green-dark); }

.toolbar { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; }
.toolbar .company-name { margin-right:auto; font-weight:800; color:var(--green-dark); }
.crumbs { font-size:.82rem; color:#789; margin-bottom:.8rem; }
.crumbs a { color:var(--green); text-decoration:none; }

.company-card { display:block; background:#fff; border-radius:10px; padding:.9rem 1.1rem;
  box-shadow:var(--card-shadow); margin-bottom:.6rem; text-decoration:none; color:inherit; }
.company-card:hover { box-shadow:0 3px 12px rgba(0,0,0,.12); }
.company-card-head { display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap; }
.company-name { font-weight:700; color:var(--green-dark); font-size:1rem; }
.company-stats { font-size:.8rem; color:#667; margin-top:.25rem; }
.company-notes { font-size:.8rem; color:#99a; margin-top:.3rem; font-style:italic; }

/* profile head */
.profile-head { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.pf-name-input { flex:1 1 240px; font-size:1.1rem; font-weight:700; color:var(--green-dark);
  border:1px solid #cfe3cf; border-radius:8px; padding:.45rem .6rem; font-family:inherit; }
.pf-notes-input { width:100%; margin-top:.5rem; border:1px solid #cfe3cf; border-radius:8px;
  padding:.45rem .6rem; font-family:inherit; font-size:.85rem; resize:vertical; }

/* gmail-style field list */
.field-list { background:#fff; border-radius:10px; box-shadow:var(--card-shadow); overflow:hidden; }
/* Seven columns for a writer (the leading "Ask for revision" tick box), six for
   a read-only viewer who never sees it — :has() on the row keeps that in CSS
   instead of a second class the template has to remember to set. */
.field-row { display:grid; grid-template-columns: 2.4fr 1fr 1.4fr 2fr 1fr 1fr; align-items:center;
  gap:.5rem; padding:.55rem .9rem; border-bottom:1px solid #eef3ee; cursor:pointer; font-size:.85rem; }
.field-row:has(.fc-pick) { grid-template-columns: 1.6rem 2.4fr 1fr 1.4fr 2fr 1fr 1fr; }
.fc-pick { display:flex; align-items:center; justify-content:center; }
.fc-pick input { cursor:pointer; }
.field-row:hover { background:#f6faf6; }
.field-row-head { background:#f0f5f0; font-weight:700; color:#557; cursor:default; font-size:.76rem;
  text-transform:uppercase; letter-spacing:.02em; }
.field-item.open > .field-row { background:#eef6ee; }
.fc-name { font-weight:600; color:var(--green-dark); }
.fc-tot { text-align:right; font-weight:600; }
.ta-r { text-align:right; }
.muted { color:#aab; }
.chip { display:inline-block; background:#eef3ee; color:#467; border-radius:99px; padding:.05rem .5rem;
  font-size:.72rem; margin-right:.25rem; }

/* Field-detail alert cards: count · ha · % per alert type, in a 2x2 block
   beside the mini-map. A card that TRIGGERED highlights as a whole box (fill +
   outline) rather than wearing a tag — several can trigger at once and all of
   them light up. Red is the deforestation tier (Hansen loss), amber the
   conversion / monitoring tier; both track the compliance palette. */
.fd-cards { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.6rem; margin:.6rem 0 .8rem; }
@media (max-width:520px){ .fd-cards { grid-template-columns:1fr; } }
.alert-card { border:1.5px solid #dfeadf; border-radius:6px; padding:.55rem .7rem .5rem;
  background:#fff; position:relative; }
.alert-card.ac-muted { opacity:.72; background:#fafcfa; }
.alert-card.ac-hit { border-width:2.5px; }
.alert-card.ac-hit-red { background:var(--red-bg); border-color:var(--red); }
.alert-card.ac-hit-red .ac-label, .alert-card.ac-hit-red .ac-num { color:var(--red); }
.alert-card.ac-hit-yellow { background:var(--amber-bg); border-color:var(--amber); }
.alert-card.ac-hit-yellow .ac-label, .alert-card.ac-hit-yellow .ac-num { color:var(--amber); }
.ac-label { font-size:13px; color:#567; font-weight:700; }
.ac-values { display:flex; gap:.9rem; align-items:baseline; margin:.3rem 0 .25rem;
  flex-wrap:wrap; }
.ac-val { white-space:nowrap; }
.ac-num { font-size:17px; font-weight:800; color:var(--green-dark); }
.ac-unit { font-size:12px; color:#789; margin-left:.18rem; }
.ac-explain { font-size:12px; color:#678; line-height:1.35; }

/* Tainted-silo marker: red corner badge until the silo is fully emptied. */
.silo-card { position:relative; }
.taint-badge { position:absolute; top:-.5rem; right:-.5rem; background:var(--red); color:#fff;
  border-radius:99px; width:1.5rem; height:1.5rem; display:flex; align-items:center;
  justify-content:center; font-size:.85rem; font-weight:800; box-shadow:0 1px 4px rgba(0,0,0,.25);
  cursor:help; }
.unload-form { border-top:1px solid #eef3ee; margin-top:.6rem; padding-top:.6rem; }

/* Header language switcher (posts to Django's set_language). */
.lang-switch { display:inline-flex; align-items:center; margin-left:.4rem; }
.lang-switch select { background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.45);
  border-radius:8px; padding:.25rem .5rem; font-family:inherit; font-size:.8rem; cursor:pointer; }
.lang-switch select option { color:#222; }

/* Management-category chip (TRACT-style second tier next to the EUDR badge).
   Tooltip (title attr) carries the trigger, e.g. "0.4 ha loss (under 0.5 ha)". */
.mgmt-chip { display:inline-block; border-radius:99px; padding:.12rem .55rem; font-size:.68rem;
  font-weight:600; border:1px solid; white-space:nowrap; cursor:help; vertical-align:middle; }
.mgmt-green { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.mgmt-yellow { background: var(--amber-bg); color: var(--amber); border-color: var(--amber); }
.mgmt-red { background: var(--red-bg); color: var(--red); border-color: var(--red); }
.tph-input { width:5.5rem; padding:.25rem .4rem; border:1px solid #cfe3cf; border-radius:6px; font-family:inherit; }

.field-detail { padding:.8rem 1rem 1.1rem; background:#fbfdfb; border-bottom:1px solid #eef3ee; }
.field-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:760px){ .field-detail-grid { grid-template-columns:1fr; } .field-row { grid-template-columns:2fr 1fr 1.3fr; } .field-row:has(.fc-pick) { grid-template-columns:1.6rem 2fr 1fr 1.3fr; } .fc-sys,.fc-tph,.fc-tot{ display:none; }
  /* single-column: the grid no longer stretches the map, so give it an explicit
     height (height:auto would collapse to 0). #all-map goes full-width, still 4:3. */
  .fd-map { height:300px; } #all-map { width:100%; } }
.fd-stats div { font-size:.82rem; line-height:1.7; }
/* Hectares is the one headline number left outside "More info". */
.fd-area { font-size:.9rem !important; }
.fd-more { margin-top:.2rem; }
.fd-more > summary { cursor:pointer; font-size:.8rem; font-weight:700; color:var(--green-dark); }
.fd-more-body { margin-top:.4rem; padding-left:.2rem; border-left:2px solid #eef3ee; }
/* The two controls the panel is allowed to show. */
.fd-actions { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.9rem; }
/* Field-settings dialog: link rows, and the deliberately unfriendly
   "Advanced options" body inside "More options". */
.fs-links { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.fs-links form { margin:0; }
.fs-advanced { margin-top:.9rem; }
/* Both classes, deliberately: the generic `.extra-options > summary` is defined
   later in this file and would otherwise win on source order and paint this
   summary green — the one colour it must not be. */
.extra-options.fs-advanced > summary { color:var(--red); }
.fs-advanced-body { border:1px solid var(--red); background:var(--red-bg);
  border-radius:2px; padding:.7rem .8rem; }
/* height:auto lets the grid's align-items:stretch size the map to the full row
   height (the left .fd-stats column, ending at the Edit/Delete buttons, is the
   taller one). min-height is a floor so Leaflet always inits with real height. */
.fd-map { height:auto; min-height:300px; border-radius:8px; resize:vertical; overflow:hidden; }

/* silos */
.silo-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.silo-card { margin-bottom:0; }
.silo-head { display:flex; justify-content:space-between; align-items:baseline; }
.silo-name { font-weight:800; color:var(--green-dark); }
.silo-balance { font-weight:800; font-size:1.1rem; color:var(--green); }
/* Small in-panel table — the field detail's boundary-history list. Sits inside
   an already-dense "More info" body, so it is quieter than .data-table. */
.mini-table { width:100%; font-size:.78rem; border-collapse:collapse; margin:.3rem 0 .2rem; }
.mini-table th { text-align:left; font-weight:700; color:#667; padding:.2rem .4rem .2rem 0;
  border-bottom:1px solid #eef3ee; }
.mini-table td { padding:.22rem .4rem .22rem 0; border-bottom:1px solid #f4f8f4; }
.mini-table tr:last-child td { border-bottom:none; }

.silo-table { width:100%; font-size:.8rem; border-collapse:collapse; margin:.5rem 0 .8rem; }
.silo-table td { padding:.2rem .1rem; border-bottom:1px solid #f0f4f0; }

/* modal — same stacking reasoning as .readiness-modal above: above Leaflet. */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center;
  justify-content:center; z-index:10000; }
.modal:not([hidden]) { display:flex; }
.modal-box { background:#fff; border-radius:12px; padding:1.4rem; width:min(440px,92vw);
  box-shadow:0 8px 30px rgba(0,0,0,.3); }
.silo-check { display:block; font-size:.85rem; margin:.25rem 0; }

/* ============ Rectangular UI (less round) ============ */
.card, .btn, .btn-sm, .badge, .banner, .msg-error, .msg-info, .msg-warn,
.company-card, .field-list, .modal-box, .chip, .simplify-panel, .map-legend,
.field input, .field select, .field textarea, .alerts-input, .tph-input,
.pf-name-input, .pf-notes-input, .silo-card,
#all-map, #edit-map, .fd-map, .plot, .plot-map img {
  border-radius: 2px !important;
}
.app-header { border-radius: 0 !important; }

/* ============ Data tables (companies / profiles) — styled like the Fields list ============ */
.data-table { width:100%; border-collapse:collapse; background:#fff; box-shadow:var(--card-shadow); }
.data-table thead th { background:#f0f5f0; color:#557; text-align:left; font-weight:700;
  font-size:.76rem; text-transform:uppercase; letter-spacing:.02em; padding:.6rem .9rem;
  border-bottom:1px solid #e3ece3; }
.data-table tbody td { padding:.6rem .9rem; border-bottom:1px solid #eef3ee; vertical-align:middle;
  font-size:.85rem; }
.data-table tbody tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover { background:#f6faf6; }
.data-table .ta-r { text-align:right; }
.row-link { color:var(--green-dark); font-weight:700; text-decoration:none; }
.row-link:hover { text-decoration:underline; }
.data-table form { margin:0; display:inline; }

.btn-danger { background:#fff; color:var(--red); border:1.5px solid var(--red); }
.btn-danger:hover { background:var(--red); color:#fff; }

/* ============ Staging — per-row indeterminate progress ============ */
.indet { position:relative; display:inline-block; vertical-align:middle; width:120px; height:8px;
  background:#e3ece3; overflow:hidden; border-radius:2px; }
.indet > div { position:absolute; height:100%; width:40%; background:var(--green);
  animation:indet 1.1s infinite linear; }
@keyframes indet { 0% { left:-40%; } 100% { left:100%; } }
.prog-label { margin-left:.5rem; font-size:.78rem; }
.st-status { white-space:nowrap; }
.st-check { text-align:center; }

/* ---- Header user menu (Gmail-style account chip) ---- */
.user-menu { position: relative; display: inline-block; }
.user-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255, 255, 255, 0.15); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px;
  padding: .25rem .8rem .25rem .3rem; cursor: pointer;
  font-family: inherit; font-size: .85rem;
}
.user-chip:hover { background: rgba(255, 255, 255, 0.25); }
.user-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: #fff; color: var(--green-dark);
  font-weight: 700; font-size: .85rem;
}
.user-avatar-lg { width: 2.4rem; height: 2.4rem; font-size: 1.15rem; }
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60;
  min-width: 270px; background: #fff; color: #222;
  border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  padding: .9rem; text-align: left;
}
.user-dd-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.user-dd-head .user-avatar { background: var(--green-dark); color: #fff; }
.user-dd-name { font-weight: 700; font-size: .95rem; }
.user-dd-email { font-size: .78rem; color: #888; }
.user-dd-org {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: var(--green-bg); border-radius: 8px; padding: .5rem .6rem;
  margin-bottom: .4rem;
}
.user-dd-orgname { font-weight: 600; font-size: .85rem; }
.user-dd-badge {
  font-size: .68rem; font-weight: 700; letter-spacing: .03em;
  background: var(--green-dark); color: #fff;
  border-radius: 999px; padding: .1rem .55rem; text-transform: uppercase;
}
.user-dd-role { font-size: .78rem; color: #666; margin-left: auto; }
.user-dd-divider { border-top: 1px solid #e4ede4; margin: .7rem 0; }
.user-dd-signout {
  width: 100%; padding: .5rem; border: 1.5px solid #cfe3cf; border-radius: 8px;
  background: #f9fdf9; color: var(--red); font-family: inherit;
  font-weight: 600; font-size: .85rem; cursor: pointer;
}
.user-dd-signout:hover { background: var(--red-bg); }
@media (max-width: 760px) {
  .user-chip { padding: .15rem; }
  .user-chip-name { display: none; }
}

/* ---- Header notification bell ---- */
.notif-menu { position: relative; display: inline-block; }
.notif-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: rgba(255, 255, 255, 0.15); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35); cursor: pointer;
}
.notif-bell:hover { background: rgba(255, 255, 255, 0.25); }
.notif-badge {
  position: absolute; top: -.3rem; right: -.3rem;
  min-width: 1.1rem; height: 1.1rem; border-radius: 999px;
  background: var(--red); color: #fff;
  font-size: .62rem; font-weight: 700; line-height: 1.1rem;
  padding: 0 .25rem; text-align: center;
}
.notif-dropdown {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60;
  width: 320px; max-width: 90vw; background: #fff; color: #222;
  border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  text-align: left; overflow: hidden;
}
.notif-dd-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem .9rem; border-bottom: 1px solid #e4ede4;
  font-weight: 700; font-size: .9rem;
}
.notif-mark-all {
  background: none; border: none; color: var(--green-dark); cursor: pointer;
  font-family: inherit; font-size: .78rem; font-weight: 600;
}
.notif-mark-all:hover { text-decoration: underline; }
.notif-list { max-height: 340px; overflow-y: auto; }
.notif-item {
  display: block; padding: .6rem .9rem; border-bottom: 1px solid #f0f5f0;
  color: #222; text-decoration: none;
}
/* The dropdown sits inside `.app-nav`, whose `a { color:#fff }` would make the
   link items white-on-white — visible only once `.app-nav a:hover` kicked in.
   Pin a dark colour (and the hover/focus highlight) with enough specificity to
   beat the nav rules, so titles read in BOTH read and unread states. */
.notif-dropdown a.notif-item { color: #222; }
.notif-dropdown a.notif-item:hover,
.notif-dropdown a.notif-item:focus-visible {
  background: var(--green-bg); color: #222;
}
.notif-unread { background: #eef7ee; }
.notif-unread .notif-title { font-weight: 700; }
.notif-title { font-size: .84rem; color: #222; }
.notif-when { font-size: .72rem; color: #888; margin-top: .15rem; }
.notif-empty { padding: 1rem .9rem; font-size: .84rem; color: #888; }

/* ---- Partners page ---- */
.partners-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (max-width: 760px) { .partners-grid { grid-template-columns: 1fr; } }
.share-code {
  font-family: "Consolas", "Menlo", monospace; font-size: 1.7rem;
  font-weight: 700; letter-spacing: .08em; color: var(--green-dark);
  background: var(--green-bg); border: 1.5px dashed var(--green-dark);
  border-radius: 10px; padding: .7rem 1rem; text-align: center;
  cursor: pointer; user-select: all;
}
.share-code:hover { background: #e3ece3; }
.partner-lookup-row { display: flex; gap: .5rem; }
.partner-lookup-row input {
  flex: 1; min-width: 0; font-family: "Consolas", "Menlo", monospace;
  letter-spacing: .05em; text-transform: uppercase;
}
.partner-lookup-org {
  display: flex; align-items: center; gap: .6rem;
  margin: .8rem 0 .6rem; font-weight: 700;
}

/* ---- Cadastre sampling and manual land-right review ---- */
.cad-toolbar { align-items: flex-start; }
.cad-toolbar .helptext { margin-top: .25rem; }
.cad-offline-note { border-left: 4px solid #1565c0; }
.cad-section-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap;
}
.cad-section-head .section-title { margin-bottom: .35rem; }
.cad-honest-status { margin: .2rem 0; font-size: .95rem; font-weight: 600; color: #344; }
.cad-status-disclaimer { margin: .35rem 0 0; max-width: 850px; }
.cad-status-badges { justify-content: flex-end; }
.cad-blockers {
  margin: .9rem 0; padding: .75rem 1rem; background: var(--red-bg);
  color: var(--red); border-left: 4px solid var(--red); font-size: .85rem;
}
.cad-blockers ul, .cad-compact-list { margin: .4rem 0 0; padding-left: 1.25rem; }
.cad-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.cad-actions form { margin: 0; }
.cad-actions .btn:disabled { opacity: .58; cursor: not-allowed; }
.cad-actions .cad-approval-form { flex: 1 1 100%; display: grid; gap: .7rem; }
.cad-approval-evidence {
  display: grid; grid-template-columns: 1fr 1fr; gap: .7rem .9rem;
  padding: .9rem; border: 1px solid #dce8dc; background: #fbfdfb;
}
.cad-approval-evidence .field { margin: 0; }
.cad-approval-evidence .helptext { grid-column: 1 / -1; margin: 0; }
.cad-cache-card { border-left: 4px solid #1565c0; }
.cad-cache-metrics {
  display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr));
  gap: .65rem; margin: .8rem 0;
}
.cad-cache-metrics > div {
  padding: .65rem .75rem; background: #f4f8fb; border-bottom: 3px solid #90a4ae;
}
.cad-cache-metrics span {
  display: block; color: #667; font-size: .7rem; font-weight: 700; text-transform: uppercase;
}
.cad-cache-metrics strong { display: block; margin-top: .15rem; color: #344; font-size: 1.1rem; }
.cad-cache-metrics .cad-cache-warn { background: var(--amber-bg); border-bottom-color: var(--amber); }
.cad-cache-metrics .cad-cache-error { background: var(--red-bg); border-bottom-color: var(--red); }
.cad-cache-progress { width: 100%; height: 12px; accent-color: var(--green); }
.cad-two-column { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; }
.cad-context-form .field { margin-bottom: .8rem; }
.cad-context-form input[type="text"],
.cad-context-form input[type="date"],
.cad-review-form input[type="text"],
.cad-review-form select,
.cad-review-form textarea,
.cad-table-controls input[type="search"] {
  width: 100%; padding: .55rem .65rem; border: 1.5px solid #cfe3cf;
  border-radius: 2px; background: #fff; color: #222; font: inherit; font-size: .84rem;
}
.cad-context-form input[readonly] { background: #f3f6f3; color: #667; }
.cad-date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.cad-form-note { display: inline-block; margin: 0 0 0 .5rem; vertical-align: middle; }
.cad-definition-list { margin: 0; }
.cad-definition-list > div {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: .75rem;
  padding: .4rem 0; border-bottom: 1px solid #eef3ee; font-size: .84rem;
}
.cad-definition-list dt { color: #667; font-weight: 600; }
.cad-definition-list dd { margin: 0; overflow-wrap: anywhere; }
.cad-metrics {
  display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: .75rem; margin-bottom: 1.2rem;
}
.cad-metric {
  background: #fff; border-left: 4px solid var(--green); padding: .8rem 1rem;
  box-shadow: var(--card-shadow);
}
.cad-metric span {
  display: block; color: #667; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
}
.cad-metric strong { display: block; margin-top: .22rem; color: var(--green-dark); font-size: 1.1rem; }
.cad-metric-warn { border-left-color: var(--amber); }
.cad-metric-warn strong { color: var(--amber); }
#cadastre-map {
  width: 100%; height: 520px; min-height: 320px; resize: vertical; overflow: hidden;
  border: 1px solid #d7e2d7; border-radius: 2px; background: #eef3ee;
}
.cad-map-loading, .cad-map-message { margin: 1rem; }
.cad-map-legend .cad-legend-field {
  background: rgba(45, 122, 58, .15); border: 2px dashed #1a5c2a;
}
.cad-map-legend .cad-legend-selected { background: #ffb74d; border-color: #e65100; }
.cad-map-legend .cad-legend-parcel { background: #90a4ae; border-color: #607d8b; }
.cad-map-popup { min-width: 170px; font-size: .8rem; line-height: 1.55; }
.cad-map-popup code { display: block; margin-bottom: .35rem; font-size: .82rem; font-weight: 700; }
.cad-review-list {
  display: grid; gap: .8rem;
  max-height: 640px; overflow-y: auto; padding-right: .3rem;
}
.cad-review-item {
  border: 1px solid #dce8dc; border-left: 4px solid var(--amber);
  padding: 1rem; background: #fbfdfb;
}
.cad-review-heading {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: .75rem; flex-wrap: wrap;
}
.cad-number { color: var(--green-dark); font-size: .95rem; font-weight: 700; }
.cad-tag-row { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; margin: .6rem 0; }
.cad-risk-chip { background: var(--amber-bg); color: var(--amber); }
.cad-review-form {
  display: grid; grid-template-columns: 1.1fr 1fr 1.5fr 1fr;
  gap: .65rem .8rem; padding-top: .8rem; border-top: 1px solid #e4ece4;
}
.cad-review-form .field { margin: 0; }
.cad-review-form .field label { font-size: .75rem; }
.cad-review-note { grid-column: 1 / -2; }
.cad-review-note textarea { resize: vertical; }
.cad-review-submit { display: flex; align-items: flex-end; justify-content: flex-end; }
.cad-table-controls { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .7rem; }
.cad-table-controls input[type="search"] { max-width: 420px; }
.cad-sample-filter { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: #556; }
.cad-table-wrap { width: 100%; overflow-x: auto; max-height: 560px; overflow-y: auto; }
.cad-table-wrap thead th { position: sticky; top: 0; z-index: 2; }
.cad-intersections-table { min-width: 1180px; box-shadow: none; }
.cad-intersections-table tbody tr.cad-row-selected { background: #fffaf2; }
.cad-intersections-table tbody tr.cad-row-selected:hover { background: #fff4df; }
.cad-intersections-table code { white-space: nowrap; }
.cad-intersections-table .btn { white-space: nowrap; margin: .1rem; }
.cad-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (max-width: 1000px) {
  .cad-metrics { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
  .cad-review-form { grid-template-columns: 1fr 1fr; }
  .cad-review-note { grid-column: 1 / -1; }
  .cad-review-submit { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 760px) {
  .cad-two-column { grid-template-columns: 1fr; }
  .cad-metrics { grid-template-columns: 1fr 1fr; }
  .cad-date-grid, .cad-review-form { grid-template-columns: 1fr; }
  .cad-approval-evidence { grid-template-columns: 1fr; }
  .cad-approval-evidence .helptext { grid-column: 1; }
  .cad-review-note, .cad-review-submit { grid-column: 1; }
  .cad-actions { align-items: stretch; }
  .cad-actions form, .cad-actions .btn { width: 100%; }
  .cad-form-note { display: block; margin: .55rem 0 0; }
  #cadastre-map { height: 420px; }
  .cad-cache-metrics { grid-template-columns: 1fr 1fr; }
}

/* ---- DDS readiness panel + issue modal ---------------------------------- */
/* Compact summary row (title + alert count + "Review issues") replacing the
   old inline bullet dump; the full list lives in a lightweight modal. Plain
   CSS/JS — no external libraries. */
.readiness-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.readiness-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  background: #fff; color: var(--amber); border: 1.5px solid #ffcc80;
  border-radius: 999px; padding: .12rem .6rem; font-weight: 700; font-size: .8rem;
}
.readiness-note { margin: .35rem 0 0; }
/* Quiet variant (company page): a collapsed line near the foot of the page
   instead of a warning banner at the head of it. Same modal underneath. */
.readiness-quiet { margin: 1.4rem .2rem 0; }
.readiness-quiet > summary { cursor: pointer; font-size: .82rem; font-weight: 700;
  color: #667; }
.readiness-quiet > summary:hover { color: var(--green-dark); }
.readiness-quiet-body { margin-top: .6rem; padding-left: .2rem; }
/* z-index 10000, not 1000: Leaflet's own control layer (.leaflet-top /
   .leaflet-bottom) sits at 1000 and its panes/popups at 400–700, and a
   .leaflet-container makes no stacking context of its own. At 1000 the modal
   only TIED with the controls of any map already on the page, so source order
   decided — and the mini-map of an expanded field row comes after the modal in
   the DOM. Its +/- zoom buttons therefore painted on top of the all-fields map
   popup and were clickable, zooming the map underneath. Every modal on the site
   reuses this shell, so one number fixes all of them (dispute, field settings,
   profile edit, readiness, share, upload wizard, all-fields map). */
.readiness-modal { position: fixed; inset: 0; z-index: 10000; display: flex;
  align-items: center; justify-content: center; padding: 1rem; }
.readiness-modal[hidden] { display: none; }
.readiness-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.readiness-modal-box {
  position: relative; background: #fff; border-radius: 10px; box-shadow: var(--card-shadow);
  width: min(720px, 100%); max-height: 80vh; display: flex; flex-direction: column;
}
.readiness-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .8rem 1rem; border-bottom: 1px solid #e6ece6;
}
.readiness-modal-x {
  border: none; background: none; font-size: 1.4rem; line-height: 1;
  cursor: pointer; color: #777; padding: 0 .2rem;
}
.readiness-modal-x:hover { color: #222; }
.readiness-modal-body { overflow: auto; padding: .6rem 1rem 1rem; }
.readiness-group { margin-top: .7rem; }
.readiness-group:first-child { margin-top: 0; }
.readiness-group-head {
  font-weight: 700; font-size: .85rem; color: var(--green-dark);
  border-bottom: 1px solid #eef3ee; padding-bottom: .2rem;
}
.readiness-list { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .82rem; }
.readiness-list li { margin: .18rem 0; }
.readiness-list a { color: var(--green-dark); }

/* ---- "All fields" map modal --------------------------------------------- */
/* Reuses the .readiness-modal shell; only the box size and the body layout
   differ. The map must FILL the box (a map you have to squint at is worse than
   no map), so the 85%-wide 16:9 letterbox that #all-map uses inline is dropped
   here in favour of flex-stretch. */
.allmap-modal .readiness-modal-box {
  width: 90vw; max-width: 90vw; height: 85vh; max-height: 85vh;
}
.allmap-modal .readiness-modal-body {
  display: flex; flex-direction: column; gap: .6rem; flex: 1; min-height: 0;
}
/* min-height keeps the map usable on short viewports; the body scrolls if the
   GFW controls and the map together no longer fit. */
.allmap-modal #all-map {
  width: 100%; height: auto; aspect-ratio: auto;
  flex: 1; min-height: 260px; margin: 0;
}

/* ---- Fields list header: title + status counts on one row --------------- */
/* The chips answer "how bad is this profile" before a single row is read, and
   reuse the compliance palette the badges below already use, so no new colour
   vocabulary. Counts come from the rendered rows (profile view) — the header
   can never disagree with the list. */
.fields-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin: 0 .2rem .7rem; }
.fields-head .section-title { margin: 0; }
.count-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.count-chip { display: inline-block; border: 1px solid; border-radius: 99px;
  padding: .12rem .6rem; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.cc-red { background: var(--red-bg); color: var(--red); border-color: var(--red); }
.cc-yellow { background: var(--amber-bg); color: var(--amber); border-color: var(--amber); }
.cc-green { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.cc-grey { background: #f5f5f5; color: #888; border-color: #bbb; }

/* Profiles list header: title + search on ONE row (see company.html). */
.profiles-head { display: flex; align-items: center; gap: .9rem; margin-left: .2rem; }
.profiles-head .section-title { margin: 0; }
.profiles-head .list-search { max-width: 320px; margin-left: auto; }
@media (max-width: 560px) {
  .profiles-head { flex-wrap: wrap; }
  .profiles-head .list-search { max-width: 100%; margin-left: 0; }
}

/* ---- Company page: read-only operator summary --------------------------- */
/* Sits directly under the company name, ABOVE the profiles list — so it must
   stay small (a label/value grid, not a form) or it pushes the profiles the
   page exists for below the fold. Editing happens in the Edit modal. */
.op-summary { padding: .75rem 1.2rem; margin-bottom: .9rem; }
.op-summary .section-title { margin-bottom: .45rem; font-size: .95rem; }
.op-facts {
  margin: 0; display: grid; gap: .3rem 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.op-facts > div { display: flex; gap: .5rem; align-items: baseline; min-width: 0; }
.op-facts dt { font-size: .75rem; font-weight: 700; color: #888; white-space: nowrap; }
.op-facts dd { margin: 0; font-size: .85rem; color: #333; overflow-wrap: anywhere; }

/* Profile-completeness strip under the operator details. Present only while
   something is blank — company.js never un-hides it for a complete company. */
.op-complete { margin-top: .7rem; border-top: 1px solid #eef3ee; padding-top: .6rem; }
.op-complete[hidden] { display: none; }
.op-complete-bar { display: flex; align-items: center; gap: .6rem; max-width: 320px; }
.op-complete-bar .progress { height: 8px; }
.op-complete-count { font-size: .78rem; font-weight: 700; color: var(--green-dark);
  white-space: nowrap; }
.op-complete-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin-top: .45rem; font-size: .82rem; color: #667; }

/* One-question-at-a-time filler (Duolingo-style): progress dots, one field. */
.op-dots { display: flex; gap: .35rem; margin-bottom: .9rem; }
.op-dot { width: 100%; height: 5px; border-radius: 99px; background: #e3ece3; }
.op-dot-on { background: var(--green); }
.op-step { margin-bottom: 1rem; }
.op-step label { display: block; font-weight: 700; font-size: .95rem;
  color: var(--green-dark); margin-bottom: .5rem; }
.op-step input { width: 100%; padding: .6rem .75rem; border: 1.5px solid #cfe3cf;
  border-radius: 2px; font-family: inherit; font-size: 1rem; background: #f9fdf9; }
.op-step-nav { display: flex; gap: .6rem; align-items: center; }
.op-step-nav .btn:disabled { opacity: .45; cursor: not-allowed; }
.op-step-nav #op-next, .op-step-nav #op-save { margin-left: auto; }

/* Large primary action — the DDS download on the company toolbar. */
.btn-lg { padding: .95rem 1.9rem; font-size: 1.05rem; }

/* ---- Company page: Edit / Share modal internals ------------------------- */
/* Destructive actions are folded away and confirmed in two steps, so a stray
   click inside an edit dialog can never delete a company. */
.extra-options { margin-top: 1.1rem; border-top: 1px solid #e6ece6; padding-top: .8rem; }
.extra-options > summary {
  cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--green-dark);
}
.extra-options-body { margin-top: .7rem; }
.danger-confirm {
  margin-top: .6rem; padding: .7rem .85rem; border: 1.5px solid var(--red);
  background: var(--red-bg); border-radius: 8px;
}
.danger-confirm[hidden] { display: none; }
.danger-confirm-text { margin: 0 0 .6rem; font-size: .82rem; color: var(--red); font-weight: 600; }
.danger-confirm-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.share-grant { margin: .2rem 0 1rem; }
.share-choice { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .6rem; }
.share-choice-opt {
  display: flex; align-items: flex-start; gap: .45rem;
  font-size: .82rem; color: #444; cursor: pointer;
}
.share-choice-opt b { color: var(--green-dark); }
.share-grant-row { margin-bottom: .6rem; }
.share-grant-row[hidden] { display: none; }
.share-grant-row select { max-width: 320px; }
.share-access-table { margin-bottom: .8rem; }
.share-handover {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  margin-top: .9rem; border-top: 1px solid #e6ece6; padding-top: .8rem;
}

/* ---- "New upload" wizard popup ------------------------------------------ */
/* Reuses the .readiness-modal shell. The point of the layout is that exactly
   ONE question is on screen at a time: a big heading, one control, and a
   footer whose Next stays greyed until that question is answered. */
.uw-box { width: min(560px, 100%); }
.uw-form { display: flex; flex-direction: column; min-height: 0; }
.uw-body { padding: 1.1rem 1.2rem .4rem; overflow: auto; }

/* Step segments: done / current / still to come. */
.uw-bar { display: flex; gap: .3rem; padding: .1rem 1.2rem .2rem; }
.uw-seg {
  flex: 1; height: 6px; border-radius: 999px; background: #e6ece6;
  transition: background .2s ease;
}
.uw-seg.is-done { background: var(--green); }
.uw-seg.is-now { background: #9ccca4; }

.uw-pane[hidden] { display: none; }
.uw-q { margin: 0 0 .9rem; font-size: 1.15rem; font-weight: 800; color: var(--green-dark); }
.uw-label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .3rem; color: #444; }
.uw-input, .uw-search {
  width: 100%; padding: .7rem .8rem; border: 1.5px solid #cfe3cf; border-radius: 10px;
  font-family: inherit; font-size: .95rem; background: #f9fdf9;
}
.uw-search { margin-bottom: .6rem; }

/* Company rows: big tap targets, the picked one outlined in brand green. */
.uw-list { display: flex; flex-direction: column; gap: .4rem; max-height: 46vh; overflow: auto; }
.uw-option {
  display: flex; flex-direction: column; gap: .1rem; text-align: left; cursor: pointer;
  padding: .7rem .9rem; border: 2px solid #e6ece6; border-radius: 12px;
  background: #fff; font-family: inherit;
}
.uw-option[hidden] { display: none; }
.uw-option:hover { border-color: #cfe3cf; background: #f7fbf7; }
.uw-option.is-picked { border-color: var(--green); background: var(--green-bg); }
.uw-option-name { font-weight: 700; font-size: .95rem; color: #222; }
.uw-option-sub { font-size: .74rem; color: #999; }
.uw-none { margin: .5rem 0 0; }

/* Step 1: two equal, unmissable routes. Not a list with a "new" escape hatch
   at the bottom — which branch you are on decides every question after it. */
.uw-choice { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (max-width: 480px) { .uw-choice { grid-template-columns: 1fr; } }
.uw-choice-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: .2rem;
  padding: 1.3rem 1rem; cursor: pointer; text-align: left; font-family: inherit;
  border: 2px solid #e6ece6; border-radius: 12px; background: #fff;
}
.uw-choice-btn:hover, .uw-choice-btn:focus-visible {
  border-color: var(--green); background: var(--green-bg); outline: none;
}
.uw-choice-title { font-weight: 800; font-size: 1rem; color: var(--green-dark); }
.uw-choice-sub { font-size: .76rem; color: #999; }

/* Drop zone. The <input type=file> fills the label, so a click anywhere in the
   box opens the picker and a drop anywhere in it is caught by the JS. */
.uw-drop {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: .25rem; margin-top: .9rem; padding: 1.6rem 1rem; cursor: pointer;
  border: 2px dashed #a5d6a7; border-radius: 14px; background: #f9fdf9; text-align: center;
}
.uw-drop.is-over, .uw-drop:hover { border-color: var(--green); background: var(--green-bg); }
.uw-drop.has-files { border-style: solid; border-color: var(--green); }
.uw-drop-icon { font-size: 1.4rem; color: var(--green); }
.uw-drop-main { font-weight: 700; font-size: .92rem; color: var(--green-dark); }
.uw-drop-sub { font-size: .74rem; color: #999; }
.uw-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* One row per picked file: name, size, an × that drops it, and its own bar.
   A bare "3 file(s) selected" could not be corrected — the only way out of a
   wrong pick was to re-open the picker and start the whole selection again. */
.uw-files { display: flex; flex-direction: column; gap: .35rem; margin-top: .6rem; }
.uw-file { border: 1px solid #e6ece6; border-radius: 8px; padding: .45rem .6rem .5rem;
  background: #fff; }
.uw-file.is-done { border-color: var(--green); background: var(--green-bg); }
.uw-file-head { display: flex; align-items: baseline; gap: .5rem; }
.uw-file-name { flex: 1; min-width: 0; font-size: .82rem; font-weight: 600; color: #333;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uw-file-size { font-size: .72rem; color: #999; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.uw-file-x { border: none; background: none; cursor: pointer; color: #999;
  font-size: 1.1rem; line-height: 1; padding: 0 .1rem; }
.uw-file-x:hover { color: var(--red); }
.uw-file-x:disabled { opacity: .4; cursor: default; }
/* The track is present from the start but flat, so the row does not jump in
   height the moment the upload begins. */
.uw-file-track { height: 4px; margin-top: .4rem; border-radius: 999px;
  background: #eef3ee; overflow: hidden; }
.uw-file-fill { height: 100%; width: 0; background: var(--green);
  transition: width .15s linear; }

/* Inline server error: the wizard's answers stay filled in behind it. */
.uw-error { margin: 0 1.2rem .2rem; font-size: .82rem; }
.uw-error[hidden] { display: none; }

.uw-more { margin-top: 1rem; border-top: 1px solid #e6ece6; padding-top: .7rem; }
.uw-more > summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--green-dark); }
.uw-more-body { margin-top: .8rem; }
.uw-more-body .grid-2 { gap: .8rem; }
.uw-mode { border: 1px solid #e6ece6; border-radius: 8px; padding: .5rem .8rem; margin: 0 0 .8rem; }
.uw-mode label { display: block; font-size: .82rem; margin: .2rem 0; }
.uw-draw-link {
  border: none; background: none; padding: 0; cursor: pointer; font-family: inherit;
  font-size: .82rem; color: var(--green-dark); text-decoration: underline;
}

.uw-foot {
  display: flex; gap: .6rem; align-items: center;
  padding: .9rem 1.2rem 1.1rem; border-top: 1px solid #e6ece6;
}
.uw-foot .uw-back[hidden] { display: none; }
.uw-foot .uw-next { margin-left: auto; min-width: 160px; padding: .8rem 1.4rem; font-size: 1rem; }
/* Step 1 has no Next — its two buttons ARE the answer. */
.uw-foot .uw-next[hidden] { display: none; }

/* ---- Staging: the simplified "Analyse" step ------------------------------ */
/* The default view is a headline, one bar and two buttons. Everything the page
   used to show inline (table, cadastre cache, normalization) lives under
   "More info" — still fully functional, just not in the way.

   The summary card is the whole point of the page, so it is centred on the
   page and sized to be the obvious focal point. Everything below is scoped to
   .stg-hero: the "More info" disclosure and the table it reveals keep their
   own position and size. */
.stg-hero {
  max-width: 760px;
  margin: .4rem auto 1.6rem;
  padding: 2.2rem 2rem 1.9rem;
  text-align: center;
}
.stg-headline {
  font-size: 2rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--green-dark);
}
/* The bar is centred and given room to breathe, but capped narrower than the
   card so it stays a bar rather than a rule across the page. */
.stg-hero .progress-wrap { max-width: 560px; margin: 1.5rem auto 1.6rem; }
.stg-hero .prog-status { font-size: .92rem; margin-bottom: .7rem; }
.stg-hero .progress { height: 18px; }
.stg-hero .progress-meta { font-size: .85rem; margin-top: .55rem; }
.stg-hero #stg-note { margin: 0 0 1.1rem; }
.stg-actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.stg-actions .btn { min-width: 220px; padding: 1rem 1.6rem; font-size: 1.05rem; }
.btn-secondary:disabled { background: #f2f5f2; color: #a8b8a8; border-color: #e3ece3; cursor: not-allowed; }
@media (max-width: 620px) {
  .stg-hero { padding: 1.5rem 1.1rem 1.3rem; }
  .stg-headline { font-size: 1.5rem; }
  .stg-actions .btn { min-width: 100%; }
}
.stg-more { margin: .4rem .2rem 1rem; }
.stg-more > summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--green-dark); }
.stg-more-body { margin-top: 1rem; }

/* ---- Profile: read-only header + Edit modal ------------------------------ */
.pf-title { font-size: 1.25rem; font-weight: 800; color: var(--green-dark); }
.pf-belongs { font-size: .85rem; color: #666; margin: .2rem 0 0; }
.pf-belongs a { color: var(--green-dark); }
.pf-edit-section { margin-top: 1rem; border-top: 1px solid #e6ece6; padding-top: .8rem; }
.pf-edit-section > summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--green-dark); }
.pf-edit-section-body { margin-top: .8rem; }