/* OneSample - office app.
   One system for every screen: tokens first, then components, then views. Colours keep
   the soil-and-field family of the field page and of the PDF; the zone colours on maps
   come from the analysis (matplotlib tab10) and are not part of the UI palette. */

:root {
  --bg: #F3F2EC;
  --surface: #FCFBF8;
  --surface-2: #F7F6F1;
  --input: #FFFFFF;
  --ink: #1F2A22;
  --ink-2: #455047;
  --muted: #6B746C;
  --line: #E2E0D6;
  --line-2: #CFCBBE;

  --primary: #2F6B45;
  --primary-hover: #25563A;
  --primary-soft: #E3EEE6;
  --accent: #B86A26;
  --accent-soft: #F6E9DA;
  --danger: #A93D36;
  --danger-soft: #F6E2E0;
  --info: #2D6CB5;
  --info-soft: #E3ECF8;
  --warn: #8A6414;
  --warn-soft: #F5ECD3;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow-1: 0 1px 2px rgba(31, 42, 34, .06);
  --shadow-2: 0 2px 6px rgba(31, 42, 34, .08), 0 12px 32px rgba(31, 42, 34, .10);

  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  --topbar-h: 56px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); color: var(--ink); text-wrap: balance; }
p { margin: 0; }
a { color: var(--primary); }
.hidden { display: none !important; }
.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; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }
.eyebrow { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stack { display: grid; gap: 16px; align-content: start; min-width: 0; }
.code { font: 600 13px/1.4 var(--mono); letter-spacing: .05em; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
.table-wrap { overflow-x: auto; }

/* ---------------------------------------------------------------- controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; padding: 7px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: var(--input); color: var(--ink);
  font: 600 13.5px/1.2 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { border-color: var(--ink-2); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #FFF; }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.quiet:hover { background: var(--surface-2); border-color: var(--line); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn.danger-solid { background: var(--danger); border-color: var(--danger); color: #FFF; }
.btn.lg { min-height: 44px; padding: 10px 18px; font-size: 14.5px; }
.btn.sm { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
.btn.block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: default; pointer-events: none; }
.btn.is-on { background: var(--ink); border-color: var(--ink); color: #FFF; }

.field { display: grid; gap: 5px; align-content: start; }
.field > span, .field > label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.field .hint { font-size: 12px; color: var(--muted); font-weight: 400; }
.input, .field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea {
  width: 100%; min-height: 38px; padding: 7px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: var(--input); color: var(--ink);
  font: 14px/1.3 var(--font); font-variant-numeric: tabular-nums;
}
.input:focus, .field input:focus, .field select:focus { outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 0; border-color: var(--primary); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; cursor: pointer; }
.check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--primary); }
.check.is-disabled { opacity: .5; cursor: default; }
.checks { display: grid; gap: 8px; }
.checks > .title { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.stepper { display: flex; align-items: stretch; }
.stepper input { text-align: center; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; min-width: 0; }
.stepper button { width: 38px; border: 1px solid var(--line-2); background: var(--surface-2); font-size: 18px; color: var(--ink-2); cursor: pointer; }
.stepper button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.stepper button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--input); cursor: pointer; }
.choice input { margin-top: 3px; accent-color: var(--primary); }
.choice strong { display: block; font-size: 13.5px; }
.choice span span { display: block; font-size: 12.5px; color: var(--muted); }
.choice:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: color-mix(in srgb, var(--primary-soft) 55%, var(--input)); }

/* «Cosa vuoi campionare oggi?»: bigger than a .choice, because this decision reshapes the
   whole form below it, not one field within it. */
.target-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 4px; }
.target-card { display: grid; justify-items: start; gap: 6px; padding: 16px; border: 1px solid var(--line-2);
  border-radius: var(--radius); background: var(--input); cursor: pointer; }
.target-card input { position: absolute; opacity: 0; pointer-events: none; }
.target-icon { font-size: 26px; line-height: 1; }
.target-card strong { font-size: 14.5px; }
.target-card:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 55%, var(--input)); }

.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--ink-2); white-space: nowrap;
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.chip.plain::before { display: none; }
.chip.draft { background: var(--surface-2); color: var(--muted); }
.chip.ready { background: var(--info-soft); color: var(--info); }
.chip.running { background: var(--warn-soft); color: var(--warn); }
.chip.results { background: var(--primary-soft); color: var(--primary); }
.chip.field { background: var(--accent-soft); color: var(--accent); }
.chip.done { background: var(--primary); color: #FFF; }
.chip.error { background: var(--danger-soft); color: var(--danger); }
.chip.history { background: var(--accent-soft); color: var(--accent); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.card-pad { padding: 18px 20px; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-title h2 { font-size: 16px; }
.section-title h3 { font-size: 14.5px; }

.bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; display: flex; }
.bar span { display: block; height: 100%; background: var(--primary); }
.bar span.skip { background: var(--line-2); }

table.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: .03em; padding: 6px 8px; border-bottom: 1px solid var(--line-2); }
.table td { padding: 8px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.table td.r, .table th.r { text-align: right; }
.swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 7px; }

/* ------------------------------------------------------------------ shell */
.app { display: flex; flex-direction: column; height: 100%; }
.topbar {
  height: var(--topbar-h); flex: none; display: flex; align-items: center; gap: 16px; padding: 0 18px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 26px; height: 26px; color: var(--primary); }
.brand-name { font: 700 16px/1 var(--font-display); letter-spacing: -.01em; }
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; font-size: 14px; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs .sep { color: var(--line-2); }
.crumbs strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.version { font-size: 12px; color: var(--muted); }

.user-menu { position: relative; }
.avatar {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: 13px; border: 0; cursor: pointer;
}
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; z-index: 1500;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2);
  padding: 6px; display: grid;
}
.menu .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu .who strong { display: block; }
.menu button, .menu a { text-align: left; padding: 8px 10px; border-radius: 6px; border: 0; background: none; font: 500 13.5px var(--font); color: var(--ink); cursor: pointer; text-decoration: none; }
.menu button:hover, .menu a:hover { background: var(--surface-2); }
.menu .danger { color: var(--danger); }

.project-bar {
  flex: none; display: flex; align-items: center; gap: 16px; padding: 10px 18px; flex-wrap: wrap;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.steps { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.step {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px;
  text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: 13.5px; border: 1px solid transparent;
}
.step:hover { background: var(--surface-2); }
.step .dot {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line-2); font-size: 12px; color: var(--ink-2);
}
.step.done .dot { background: var(--primary-soft); border-color: var(--primary-soft); color: var(--primary); }
.step.current { background: var(--ink); color: #FFF; }
.step.current .dot { background: #FFF; border-color: #FFF; color: var(--ink); }
.steps .link { width: 16px; height: 1px; background: var(--line-2); }
.project-bar .spacer { flex: 1; }
.project-meta { font-size: 12.5px; color: var(--muted); }

.view { flex: 1; min-height: 0; position: relative; overflow: auto; }
.page { max-width: 1180px; margin: 0 auto; padding: 28px 22px 48px; display: grid; gap: 22px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 26px; font-weight: 700; letter-spacing: -.015em; }
.page-head p { color: var(--muted); margin-top: 3px; }

/* ------------------------------------------------------------- projects */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.toolbar .search { position: relative; flex: 1; min-width: 220px; max-width: 360px; }
.toolbar .search svg { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted); }
.toolbar .search input { padding-left: 34px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters button { border: 1px solid var(--line-2); background: var(--input); color: var(--ink-2); border-radius: 999px; padding: 5px 12px; font: 600 12.5px var(--font); cursor: pointer; }
.filters button.on { background: var(--ink); border-color: var(--ink); color: #FFF; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.pcard { display: grid; gap: 12px; padding: 16px 16px 14px; }
.pcard-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.pcard h3 { font-size: 16px; line-height: 1.25; word-break: break-word; }
.pcard h3 a { color: inherit; text-decoration: none; }
.pcard h3 a:hover { text-decoration: underline; }
.pcard .client { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.pcard .stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pcard .stats b { color: var(--ink); }
.pcard .progress { display: grid; gap: 5px; font-size: 12.5px; color: var(--muted); }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.pcard-foot .when { font-size: 12px; color: var(--muted); }
.empty { text-align: center; padding: 56px 20px; display: grid; gap: 12px; justify-items: center; }
.empty h2 { font-size: 18px; }
.empty p { max-width: 460px; color: var(--muted); }

/* ------------------------------------------------------------ workspaces */
.workspace { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
.workspace .map-pane { position: relative; min-width: 0; }
.workspace .map-pane > .map { position: absolute; inset: 0; }
.side-pane { background: var(--surface); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.side-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.side-head h2 { font-size: 16px; }
/* minmax(0, 1fr): a long field name shortens with an ellipsis instead of widening the panel */
.side-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
.side-foot { padding: 12px 18px 16px; border-top: 1px solid var(--line); display: grid; gap: 8px; background: var(--surface); }

.map-float { position: absolute; z-index: 800; }
.map-search { top: 12px; left: 56px; width: min(380px, calc(100% - 120px)); }
.map-search .box { display: flex; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 5px; }
.map-search input { border: 0 !important; min-height: 34px; flex: 1; }
.map-search input:focus { outline: none; }
.results-list { margin: 6px 0 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); max-height: 280px; overflow: auto; }
.results-list li button { width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 6px; font: 13.5px var(--font); color: var(--ink); cursor: pointer; }
.results-list li button:hover { background: var(--surface-2); }
.results-list .kind { color: var(--muted); font-size: 12px; margin-left: 6px; }
/* hint and tools stacked at the bottom centre: a wrapped toolbar pushes the hint up
   instead of sliding under it */
.map-dock { left: 12px; right: 12px; bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.map-dock > * { pointer-events: auto; }
.map-toolbar { display: flex; gap: 6px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-2); flex-wrap: wrap; justify-content: center; max-width: 100%; }
.map-hint { max-width: min(560px, 100%); background: rgba(31, 42, 34, .86); color: #FFF; padding: 7px 12px; border-radius: 16px; font-size: 13px; text-align: center; pointer-events: none !important; }
.drop-zone { inset: 10px; border: 2px dashed var(--primary); border-radius: 14px; background: rgba(47, 107, 69, .12); display: grid; place-items: center; font-weight: 700; color: var(--primary); font-size: 16px; pointer-events: none; }

.flist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.fitem { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--input); }
.fitem.picked { border-color: #FF7A1A; box-shadow: inset 0 0 0 1px #FF7A1A; }
.fitem .pick { width: 16px; height: 16px; flex: none; accent-color: #FF7A1A; cursor: pointer; }
.fitem .t { flex: 1; }
.fitem .n { flex: none; }
.fitem button.split { width: auto; padding: 0 8px; font-size: 12px; font-weight: 600; color: var(--ink-2); border: 1px solid var(--line-2); }
.fitem button.split:hover, .fitem button.act:hover { background: var(--surface-2); color: var(--ink); }
/* the menu of one field (modifica, semplifica, accesso): neutral, not the red of "togli" */
.fitem button.act { color: var(--ink-2); }
.fitem button.act svg { width: 18px; height: 18px; display: block; margin: 0 auto; }
.fitem.editing { border-color: #FF7A1A; box-shadow: inset 0 0 0 1px #FF7A1A; }
.merge-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, #FF7A1A 12%, var(--surface)); border: 1px solid color-mix(in srgb, #FF7A1A 45%, var(--line)); font-size: 13px; font-weight: 600; }
.fitem .n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: 12px; }
.fitem .t { min-width: 0; }
.fitem .t strong { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fitem .t span { font-size: 12px; color: var(--muted); }
.fitem .t .meta .o + .a::before { content: " · "; }
.fitem .t .meta .ch { color: var(--warn); font-weight: 600; }
.fitem .t .meta .ch::before, .fitem .t .meta .g::before { content: " · "; color: var(--muted); font-weight: 400; }
/* one line per field when the list would not fit the window */
.flist.compact { gap: 4px; }
.flist.compact .fitem { padding: 4px 8px; gap: 8px; }
.flist.compact .fitem .t { display: flex; align-items: baseline; gap: 8px; }
.flist.compact .fitem .t strong { flex: 1; min-width: 0; font-size: 13px; }
.flist.compact .fitem .t .meta { flex: none; font-variant-numeric: tabular-nums; }
.flist.compact .fitem .t .o { display: none; }
.flist.compact .fitem .t .meta .o + .a::before { content: none; }
.flist.compact .fitem .n { width: 20px; height: 20px; font-size: 11px; }
.flist.compact .fitem button { height: 24px; }
.flist.compact .fitem button.split { height: 22px; }
.finder-card { padding: 10px 14px; }
.finder-card summary { cursor: pointer; list-style-position: inside; }
.finder-card summary h3 { display: inline; font-size: 14px; }
.finder-card[open] summary { margin-bottom: 8px; }
.fitem button { border: 0; background: none; color: var(--muted); width: 30px; height: 30px; border-radius: 6px; cursor: pointer; font-size: 18px; line-height: 1; }
.fitem button:hover { background: var(--danger-soft); color: var(--danger); }
.unsaved { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--warn); background: var(--warn-soft); border-radius: var(--radius-sm); padding: 7px 10px; }
.finder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: end; margin-top: 8px; }
/* the municipality list hangs over what follows, like the place search on the map */
.comune-field { position: relative; }
.comune-field .results-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 900; }
.finder-msg { margin-top: 8px; }
.finder-msg.warn { color: var(--warn); }
.finder-run { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
#find-matches:not(:empty) { margin-top: 8px; }
.totals { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fields-actions { margin-top: 6px; }

/* the handles that move the vertices of a field: the divIcon's own element is Leaflet's
   (position, transform), so the handle is this inner <div> */
.vhandle {
  width: 16px; height: 16px; border-radius: 50%; background: #FF7A1A; border: 2px solid #FFF;
  box-shadow: 0 1px 4px rgba(0,0,0,.45); cursor: grab;
}
.vhandle.mid { width: 14px; height: 14px; background: var(--surface); border: 2px solid #FF7A1A; opacity: .85; }
.vhandle.mid:hover { opacity: 1; }
/* «Accesso al campo»: the same gate the field page draws (web/static/field.css, .fgate) */
.fgate {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px;
  background: #1F6FD1; border: 2px solid #FFF; color: #FFF; box-shadow: 0 1px 5px rgba(0,0,0,.4); cursor: grab;
}
.fgate svg { display: block; width: 16px; height: 16px; }
.simp-out { font-size: 13px; color: var(--ink-2); min-height: 40px; }
.simp-out .warn { color: var(--warn); }

/* -------------------------------------------------------------- analysis */
.analysis { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
/* two boxes side by side inside a card (the measurements of a quadrat) */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
/* a numbered explanation: how the pixels of a survey are chosen */
.steps-list { margin: 0; padding-left: 20px; display: grid; gap: 7px; color: var(--ink-2); }
.steps-list strong { color: var(--ink); }
.form-card { display: grid; gap: 16px; }
.form-card .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.form-card h2 { font-size: 15.5px; }
.form-card .lead { color: var(--muted); font-size: 13px; margin-top: -8px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
details.advanced > summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary::before { content: "›"; display: inline-block; transition: transform .15s ease; font-size: 18px; line-height: 1; color: var(--muted); }
details.advanced[open] > summary::before { transform: rotate(90deg); }
details.advanced .row { margin-top: 14px; }
.sticky { position: sticky; top: 16px; display: grid; gap: 14px; }
.summary-list { display: grid; gap: 8px; font-size: 13.5px; }
.summary-list div { display: flex; justify-content: space-between; gap: 12px; }
.summary-list dt { color: var(--muted); }
.summary-list dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.summary-list dd .sub { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.notice pre.log { margin-top: 4px; max-height: 180px; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 8px 0; position: relative; }
.timeline li::after { content: ""; position: absolute; left: 12px; top: 34px; bottom: -6px; width: 2px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline .mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 2px solid var(--line-2); font-size: 12px; font-weight: 700; color: var(--muted); z-index: 1; }
.timeline .done .mark { background: var(--primary); border-color: var(--primary); color: #FFF; }
.timeline .current .mark { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.timeline .title { font-weight: 600; }
.timeline .desc { font-size: 12.5px; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .timeline .current .mark { animation: breathe 1.6s ease-in-out infinite; }
  @keyframes breathe { 50% { box-shadow: 0 0 0 5px rgba(184, 106, 38, .18); } }
}
.notice { border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; display: grid; gap: 4px; }
.notice.info { background: var(--info-soft); color: #1D4A80; }
.notice.warn { background: var(--warn-soft); color: #6B4C0C; }
.notice.ok { background: var(--primary-soft); color: #1E4A2E; }
.notice.error { background: var(--danger-soft); color: #7F2923; }
.notice a { color: inherit; font-weight: 700; }
pre.log { margin: 8px 0 0; max-height: 260px; overflow: auto; padding: 10px; background: #1D231F; color: #E6E4DC; border-radius: var(--radius-sm); font: 11.5px/1.5 var(--mono); white-space: pre-wrap; word-break: break-word; }

/* --------------------------------------------------------------- results */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { padding: 14px 16px; display: grid; gap: 2px; }
.kpi .v { font: 700 24px/1.1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi .l { font-size: 12.5px; color: var(--muted); }
.actions-row { display: flex; flex-wrap: wrap; gap: 8px; }
.results-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; min-height: 560px; }
.results-map { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); min-height: 560px; }
.results-map .map { position: absolute; inset: 0; }
.results-map .view-switch { top: 12px; left: 56px; max-width: calc(100% - 120px); display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-2); }
.results-map .view-switch label { font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.field-rows { display: grid; gap: 6px; }
.field-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--input); cursor: pointer; font: inherit; color: inherit; }
.field-row:hover { border-color: var(--line-2); }
.field-row.on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.field-row .state { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.field-row .state.ko { background: var(--danger); }
.field-row small { display: block; color: var(--muted); font-size: 12px; }
.field-row .t { min-width: 0; }
.field-row .t strong { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.results-side { padding: 16px; display: grid; gap: 20px; align-content: start; }
@media (min-width: 1081px) {
  .results-side { max-height: 780px; overflow: auto; }

  /* The results page fills the window instead of reading like a document: the head, the
     four figures and the notices keep their own height, the map and the list of fields
     share what is left, and only the list scrolls. On a window too short for a usable map
     the page scrolls again (min-height below). Under 1081px the layout stacks, as before. */
  .page.fit {
    display: flex; flex-direction: column; gap: 14px; height: 100%; max-width: 1800px;
    padding: 18px 22px; box-sizing: border-box;
  }
  /* head, figures and notices keep their own height: only the map and the list give way */
  .page.fit > * { flex: none; }
  .page.fit .page-head h1 { font-size: 22px; }
  .page.fit .kpi { padding: 10px 14px; }
  .page.fit .kpi .v { font-size: 20px; }
  .page.fit .notice { max-height: 22vh; overflow: auto; }
  .page.fit .results-layout { flex: 1 1 auto; min-height: 320px; }
  .page.fit .results-map { min-height: 0; }
  .page.fit .results-side { max-height: none; min-height: 0; overflow: auto; }

  /* «In campo» fills the window the same way. Here both columns hold more than one screen
     (map, progress, activity | route, QR, links), so each one scrolls on its own and the
     page itself does not: the map keeps a generous share of the height and the rest of
     the column scrolls under it. */
  .page.fit .fw-layout { flex: 1 1 auto; min-height: 320px; align-items: stretch; }
  .page.fit .fw-layout > .stack,
  .page.fit .fw-layout > .sticky { min-height: 0; overflow: auto; padding-right: 2px; }
  .page.fit .fw-layout > .sticky { position: static; align-content: start; }
  .page.fit .fw-map { height: min(46vh, 460px); min-height: 220px; }
  /* The card clips the map to its rounded corners. Inside a column with a height of its
     own that clipping would make the browser treat the card as empty and squash it, so
     here the card is told to take the height of what it holds (either declaration alone
     is enough; both are kept so an older browser still gets one of them). */
  .page.fit .fw-map-card { overflow: clip; height: fit-content; }
}

/* A short window (a laptop, a browser with many toolbars): the same layout with less air
   around the figures, so the map still gets its height without the page scrolling. */
@media (min-width: 1081px) and (max-height: 780px) {
  .page.fit { gap: 10px; padding: 12px 22px; }
  .page.fit .page-head h1 { font-size: 20px; }
  .page.fit .kpi { padding: 8px 12px; }
  .page.fit .kpi .v { font-size: 18px; }
  .page.fit .notice { max-height: 20vh; }
  .page.fit .results-layout { min-height: 280px; }
  .page.fit .fw-layout { min-height: 280px; }
  .page.fit .fw-map { height: min(40vh, 320px); min-height: 200px; }
}
.results-block .section-title { margin-bottom: 8px; }
/* bottom left, above the scale: the legend of the map layers takes the bottom right */
.results-map .map-dock { left: 12px; right: 250px; bottom: 34px; align-items: flex-start; }
.downloads { display: grid; gap: 4px; }
.downloads a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; border-radius: 6px; text-decoration: none; color: var(--ink); font-size: 13px; }
.downloads a:hover { background: var(--surface-2); }
.downloads a span { color: var(--muted); font-size: 12px; font-family: var(--mono); }

.map-legend { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 12px; line-height: 1.55; color: var(--ink); box-shadow: var(--shadow-1); }
.map-legend b { display: block; margin-bottom: 2px; }
.map-legend .sw { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; border-radius: 2px; }
.pt-label { background: #FFF; border: 1px solid var(--ink); border-radius: 4px; color: var(--ink); font: 700 11px/1 var(--font); padding: 2px 4px; box-shadow: none; }
.pt-label::before { display: none; }
.pt-square { background: #FFF; border: 2px solid var(--ink); width: 12px; height: 12px; box-sizing: border-box; }
.pt-risk { background: none; border: 0; }
/* A point that can be dragged to an equivalent place: an L.marker, because a circleMarker
   cannot be dragged, drawn like the circle it replaces. Only its own paint here - Leaflet
   owns position and transform on a divIcon's element. */
.pt-dot { background: var(--ink); border: 2px solid #FFF; border-radius: 50%; cursor: grab; }
.leaflet-dragging .pt-dot, .pt-dot:active { cursor: grabbing; }
/* somebody moved it by hand: the ring says it is not where the analysis had planned it */
.pt-dot.adjusted { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pt-square.adjusted { border-color: var(--accent); }
/* the vegetation pixels colour the dot by what was measured there, not by a zone */
.pt-dot.v-da_fare { background: #FFFFFF; }
.pt-dot.v-visitato { background: #E8A33D; }
.pt-dot.v-completo { background: #2E7D32; }
.pt-dot.v-saltato { background: #9E9E9E; }

.moved-rows { display: grid; gap: 6px; }
.moved-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--input); }
.moved-row .t { min-width: 0; }
.moved-row .t strong { display: block; font-size: 13.5px; }
.moved-row .t small { display: block; color: var(--muted); font-size: 12px; }
/* the maps of a field are 10 m pixels: shown as pixels, never smoothed into a blur */
.leaflet-image-layer.data-layer { image-rendering: pixelated; }
.pt-risk svg, .lg-tri svg { display: block; }
.lg-tri { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; }
.lg-tri svg { width: 11px; height: 11px; }
.lg-ramp { height: 10px; width: 170px; max-width: 100%; border-radius: 3px; margin: 4px 0 2px; }
.lg-ends { display: flex; justify-content: space-between; width: 170px; max-width: 100%; font-variant-numeric: tabular-nums; color: var(--muted); }
.popup-coords { font-family: var(--mono); }
.results-map .view-switch select { min-height: 30px; min-width: 0; padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--input); color: var(--ink); font: 600 12.5px var(--font); max-width: 260px; }

/* readings of one field: zones, crop, kriging */
.reading { display: grid; gap: 10px; }
.reading p { margin: 0; font-size: 13px; }
.reading .sub-title { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-top: 4px; }
.sil { display: grid; gap: 4px; }
.sil-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) 40px; gap: 8px; align-items: center; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.sil-row .v { text-align: right; }
.sil-bar { position: relative; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.sil-bar i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--muted) 55%, var(--surface-2)); border-radius: 4px; }
.sil-row.on { color: var(--ink); font-weight: 700; }
.sil-row.on .sil-bar i { background: var(--primary); }
.sil-bar b { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.sil p { margin: 2px 0 0; }
.structure { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.structure::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.structure.forte, .structure.ragionevole { color: var(--primary); }
.structure.debole { color: var(--warn); }
.structure.assente { color: var(--danger); }
.table.compact th, .table.compact td { padding: 5px 6px; font-size: 12.5px; }
.table .plus { color: var(--primary); }
.table .minus { color: var(--danger); }
.link-btn { border: 0; background: none; padding: 0; color: var(--primary); font: 600 12.5px var(--font); cursor: pointer; text-align: left; }
.link-btn:hover { text-decoration: underline; }
.facts { display: grid; gap: 6px; margin: 0; }
.facts div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; font-size: 13px; }
.facts dt { color: var(--ink-2); }
.facts dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.facts .sub { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }

/* ------------------------------------------------------------- field work */
.route-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.route-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; }
.route-list .n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #1F6FD1; color: #FFF; font-weight: 700; font-size: 12px; }
.fw-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.activity { list-style: none; margin: 0; padding: 0; display: grid; }
.activity li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.activity li:last-child { border-bottom: 0; }
.activity .dotc { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); }
.activity .dotc.skip { background: var(--line-2); }
.activity time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.qr-inline { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; }
.qr-inline img, .qr-inline svg { width: 112px; height: 112px; border: 1px solid var(--line); border-radius: 6px; background: #FFF; padding: 4px; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.history-chart svg { display: block; width: 100%; height: 74px; margin: 6px 0; }
.recovery-codes code { display: block; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--input); text-align: center; letter-spacing: .03em; }
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.link-list li { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 13px; padding: 7px 0; border-top: 1px solid var(--line); }
.url-box { font: 12px/1.4 var(--mono); word-break: break-all; background: var(--input); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; }
.url-row { display: flex; gap: 6px; align-items: center; }
.url-row .url-box { flex: 1; min-width: 0; color: var(--ink); }
.row2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.activity .empty-row { display: block; padding: 10px 0; }
.fw-map-card { overflow: hidden; }
.fw-map { height: 440px; }
.fw-map-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.lg-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -2px; border: 2px solid #FFF; box-shadow: 0 0 0 1px var(--ink-2); }
.lg-dot.done { background: var(--primary); }
.lg-dot.skip { background: #8C8A80; }
.lg-dot.todo { background: #FFF; }
.fw-pt { display: grid; place-items: center; border-radius: 50%; border: 2px solid #FFF; font: 700 10px/1 var(--font); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); cursor: grab; }
.leaflet-dragging .fw-pt, .fw-pt:active { cursor: grabbing; }
.fw-pt.todo { background: #FFF; color: var(--ink); border-color: var(--ink); }
.fw-pt.done { background: var(--primary); color: #FFF; }
.fw-pt.skip { background: #8C8A80; color: #FFF; }
.fw-pt.boundary { border-radius: 4px; }
/* areas at risk: a diamond drawn behind the number. Leaflet owns the marker's position
   (absolute) and transform: neither may be set here, or the markers drift out of place */
.fw-pt.risk { background: none; border: 0; box-shadow: none; }
.fw-pt.risk::before { content: ""; position: absolute; inset: 3px; transform: rotate(45deg); border-radius: 3px; border: 2px solid #C62828; background: #FFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.fw-pt.risk.done::before { background: var(--primary); border-color: #FFF; }
.fw-pt.risk.skip::before { background: #8C8A80; border-color: #FFF; }
.fw-pt.risk span { position: relative; }

/* --------------------------------------------------------- crop history */
/* the card in the Campi panel: narrow, so everything is one column and the type stays small */
#history-card { padding: 14px 16px; display: grid; gap: 10px; align-content: start; }
#history-card .section-title { margin-bottom: 0; }
#history-card h3 { font-size: 14px; }
#history-card h4 { font-size: 13px; }
#history-card p { font-size: 13px; }
.hist-timeline li { padding: 4px 0; grid-template-columns: 20px minmax(0, 1fr); }
.hist-timeline li::after { top: 28px; left: 9px; }
.hist-timeline .mark { width: 20px; height: 20px; border-width: 1.5px; font-size: 11px; }
.hist-groups { display: grid; gap: 10px; }
.hist-group { display: grid; gap: 5px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.hist-group strong { font-size: 13px; }
.hist-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.hist-chips .chip { font-size: 11.5px; padding: 1px 7px; }

/* the figure and the same data as a table, in the «xwide» dialog */
/* minmax(0, 1fr) all the way down: without it the wide image, or the table, would widen the
   dialog instead of scrolling inside it, and the page itself would scroll sideways */
.dlg-content:has(> .hist-fig) { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.hist-fig { display: grid; gap: 12px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.hist-toggle { display: flex; gap: 6px; }
.hist-scroll { overflow-x: auto; min-width: 0; }
.hist-fig img { display: block; width: 100%; min-width: 720px; height: auto; }
.hist-table { min-width: 520px; }
.hist-table caption { text-align: left; font-size: 12.5px; color: var(--muted); padding-bottom: 8px; }
.hist-table th[scope="row"], .hist-table thead th:first-child { position: sticky; left: 0; background: var(--surface); }
.hist-table th[scope="row"] { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; padding: 8px; border-bottom: 1px solid var(--line); }
.hist-table td { white-space: nowrap; }

/* --------------------------------------------------------- dialogs, toasts */
dialog.dlg { border: 1px solid var(--line); border-radius: 14px; padding: 0; width: min(460px, 94vw); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); }
dialog.dlg.wide { width: min(640px, 94vw); }
dialog.dlg.xwide { width: min(1100px, 96vw); }
dialog.dlg::backdrop { background: rgba(24, 30, 26, .45); }
.dlg-body { padding: 20px 22px 8px; display: grid; gap: 14px; }
.dlg-body h2 { font-size: 18px; }
.dlg-body .message { color: var(--ink-2); }
.dlg-content { display: grid; gap: 14px; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px 18px; }
.dlg-error { color: var(--danger); font-size: 13px; }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 3000; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: #FFF; padding: 10px 14px; border-radius: var(--radius-sm); box-shadow: var(--shadow-2); font-size: 13.5px; display: flex; gap: 10px; align-items: flex-start; }
.toast.ok { background: var(--primary); }
.toast.error { background: var(--danger); }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: rise .18s ease-out; }
  @keyframes rise { from { transform: translateY(8px); opacity: 0; } }
}

/* ------------------------------------------------------------------ login */
.login { position: fixed; inset: 0; z-index: 2500; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--bg); }
.login-art { background: var(--primary); color: #F1F4EE; padding: 48px; display: grid; align-content: space-between; position: relative; overflow: hidden; }
.login-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.login-art .brand { color: #FFF; position: relative; }
.login-art .brand-mark { color: #FFF; }
.login-art blockquote { margin: 0; position: relative; max-width: 420px; }
.login-art blockquote p { font: 600 26px/1.3 var(--font-display); letter-spacing: -.01em; color: #FFF; }
.login-art blockquote span { display: block; margin-top: 12px; color: #D5E2D8; font-size: 14px; }
.login-form-wrap { display: grid; place-items: center; padding: 32px 20px; }
.login-form { width: min(360px, 100%); display: grid; gap: 16px; }
.login-form h1 { font-size: 24px; }
.login-form .foot { font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .analysis, .fw-layout { grid-template-columns: minmax(0, 1fr); }
  .sticky { position: static; }
  .results-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  /* Su schermo grande l'applicazione e' un guscio alto quanto la finestra, e a scorrere e'
     il riquadro centrale: la barra in alto e i passi restano fermi mentre si guarda una
     tabella lunga. Su un telefono quella scelta si paga due volte. La barra degli indirizzi
     del browser si ritrae solo quando scorre il *documento*, quindi con un guscio fisso
     resta li' per sempre e mangia un decimo dello schermo; e per scorrere bisogna appoggiare
     il dito fuori dalla mappa, perche' sulla mappa il dito trascina la mappa. Qui il guscio
     si apre e a scorrere torna a essere la pagina, come il telefono si aspetta. */
  html, body { height: auto; }
  .app { height: auto; min-height: 100dvh; }
  .view { overflow: visible; }
  /* Sopra i 1000 dei controlli di Leaflet, altrimenti i pulsanti dello zoom passano sopra
     la barra mentre si scorre; il menu dell'utente, che sta dentro la barra, resta sopra. */
  .topbar { position: sticky; top: 0; z-index: 1100; }
  .workspace { position: static; display: block; }
  /* dvh e non vh: vh e' l'altezza dello schermo *senza* la barra degli indirizzi, cioe' piu'
     di quello che si vede finche' la barra c'e'. Il tetto in pixel serve ai telefoni alti,
     dove il 58% dello schermo sarebbe mappa e basta. */
  .workspace .map-pane { height: min(58dvh, 440px); }
  .side-pane { border-left: 0; border-top: 1px solid var(--line); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login { grid-template-columns: minmax(0, 1fr); }
  .login-art { display: none; }
  .version { display: none; }
  .project-meta { display: none; }
  .map-search { left: 54px; width: calc(100% - 116px); }
}
@media (max-width: 600px) {
  /* the history figure needs the whole screen: the dialog becomes the page */
  dialog.dlg.xwide { width: 100vw; max-width: 100vw; max-height: 100dvh; margin: 0; border-radius: 0; }
}
@media (max-width: 620px) {
  .step .label { display: none; }
  .step { padding: 4px; }
  .steps .link { width: 8px; }
  .page { padding: 20px 14px 40px; }
  .form-card .row, .row2, .choices { grid-template-columns: minmax(0, 1fr); }
  .crumbs .sep, .crumbs a { display: none; }
  .results-map .map-dock { display: none; }
  .results-layout, .results-map { min-height: 420px; }
  .map-hint { font-size: 12px; padding: 6px 10px; }
  .map-toolbar .btn { min-height: 34px; padding: 6px 10px; font-size: 13px; }
  .fw-map { height: 340px; }
  .page-head .actions-row .btn.lg { min-height: 38px; padding: 7px 12px; font-size: 13.5px; }
}

/* ------------------------------------------------------- bersagli per il dito
   Non si guarda la larghezza della finestra ma il puntatore: una finestra stretta su un
   portatile ha comunque il mouse, e un tablet largo ha comunque il dito. Sotto i 44px si
   sbaglia bottone, e qui sbagliare bottone vuol dire far partire un'analisi che costa
   crediti, o cancellare un campo. Viene dopo il blocco dei 620px apposta: quello rimpicciolisce
   i pulsanti per farceli stare tutti, che e' giusto col mouse e sbagliato col dito. */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn.sm { min-height: 40px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
  .map-toolbar .btn { min-height: 44px; padding: 10px 12px; font-size: 13.5px; }
  .page-head .actions-row .btn.lg { min-height: 46px; padding: 11px 16px; font-size: 14.5px; }
  select, input[type="text"], input[type="number"], input[type="date"], input[type="search"] { min-height: 44px; }
  /* La casella che sceglie i campi da unire e' il percorso del telefono al posto di
     Maiusc+clic (web/static/js/fields.js): tocca che sia grande abbastanza. */
  .fitem input.pick { width: 22px; height: 22px; }
  /* Il menu e la «×» di ogni campo: la «×» cancella un campo e sta a un dito dal menu,
     quindi e' proprio la coppia che non si deve sbagliare. */
  .fitem button { min-width: 40px; min-height: 40px; }
}