/* SY GIS Boring - base layout (structure only). Colours, type and the workspace shell come from sy-ui.css,
   which app.js injects after this sheet - the same arrangement as SY Pave / SY GirderNL / SY Column. */
* { box-sizing: border-box; }
html, body { margin: 0; }
.hidden { display: none !important; }
.topbar { display: flex; align-items: center; }
.brand { display: flex; align-items: center; text-decoration: none; color: inherit; }
.brand-icon { display: inline-block; width: 26px; height: 26px; background:
  radial-gradient(circle at 50% 38%, #fff 0 4px, transparent 4.5px), #d9341b; clip-path: polygon(50% 100%, 8% 42%, 8% 0, 92% 0, 92% 42%); }
.btn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.btn:disabled { cursor: not-allowed; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field input, .field select, .field textarea { width: 100%; padding: 7px 9px; font: inherit; }
.grid { display: grid; gap: 10px 16px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.spacer { flex: 1 1 auto; }
.card { margin: 0 0 16px; }
.msg { padding: 10px 12px; margin: 0 0 14px; font-size: 13px; }
table.t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.t th, table.t td { padding: 6px 8px; text-align: left; vertical-align: middle; }
table.t td.num, table.t th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.t tr.click { cursor: pointer; }
.tablewrap { overflow-x: auto; }
table.edit { table-layout: fixed; min-width: 0; }
@media (max-width: 1100px) { table.edit { min-width: 780px; } }
table.edit input[type=number] { -moz-appearance: textfield; appearance: textfield; }
table.edit input[type=number]::-webkit-outer-spin-button, table.edit input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
table.edit input, table.edit select { width: 100%; min-width: 0; padding: 5px 3px; font: inherit; font-size: 12px; }
table.edit th { padding: 6px 4px; white-space: normal; line-height: 1.2; vertical-align: bottom; }
table.edit th:first-child { width: 28px; } table.edit th:last-child { width: 36px; }
table.edit.layers th:nth-child(4) { width: 66px; } table.edit.layers th:nth-child(5) { width: 48px; } table.edit.layers th:nth-child(6) { width: 84px; } table.edit.layers th:nth-child(13) { width: 56px; }
table.edit.samples th:nth-child(3) { width: 72px; }
table.edit td { padding: 3px 2px; }
table.edit td.idx { width: 28px; text-align: center; font-weight: 700; }
.gate { margin: 60px auto; text-align: center; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2000; padding: 10px 16px; max-width: min(92vw, 560px); font-size: 13px; }
.map { width: 100%; height: clamp(320px, calc(100vh - 250px), 760px); }
.map.small { height: 300px; }
.map-fallback { position: relative; background: #f4f3ef; overflow: hidden; }
.map-fallback .pt { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #141414; cursor: pointer; }
.map-fallback .note { position: absolute; left: 10px; bottom: 8px; font-size: 11px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; margin: 8px 0 0; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #141414; margin-right: 5px; vertical-align: -1px; }
.soilcol { display: block; width: 100%; height: auto; }
.modal-back { position: fixed; inset: 0; background: rgba(20,20,20,.45); z-index: 1500; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: #fff; max-width: 680px; width: 100%; max-height: 88vh; overflow: auto; padding: 22px 24px; }
.modal p { margin: 0 0 10px; }

/* advanced search */
.chips { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1.5px solid var(--sy-ink, #141414); font-size: 12px; cursor: pointer; user-select: none; background: var(--sy-bg, #fff); }
.chip input { margin: 0; accent-color: var(--sy-accent, #d9341b); }
.chip:has(input:checked) { background: var(--sy-ink, #141414); color: #fff; }
.chip.solo { margin-top: 12px; }
table.edit.ranges th:nth-child(1) { width: 32%; } table.edit.ranges th:last-child { width: 36px; } table.edit.ranges th:first-child { width: 32%; }
table.results td .sub { font-size: 11.5px; color: var(--sy-muted, #5b6470); margin-top: 2px; }
.tag { display: inline-block; margin: 1px 4px 1px 0; padding: 1px 6px; font-size: 11px; border: 1px solid var(--sy-bg-3, #d0d4da); background: var(--sy-bg-2, #f4f5f7); white-space: nowrap; }
.tag.est { border-color: #1d5fd1; color: #1d5fd1; background: #fff; }
table.results th:nth-child(1) { min-width: 190px; } table.results th:nth-child(5) { min-width: 200px; } table.results th:nth-child(6) { min-width: 150px; }
table.edit.samples th:nth-child(7) { width: 70px; }
table.edit.thick th:nth-child(1) { width: 24%; } table.edit.thick th:nth-child(3) { width: 17%; } table.edit.thick th:nth-child(6) { width: 16%; } table.edit.thick th:last-child { width: 36px; }
.corrbar .btn { align-self: flex-end; }

/* SY GeoData brand */
.brand-logo { display: block; height: 26px; width: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 520px) { .brand-logo { height: 20px; } }
#syHdrSoil { text-transform: none; margin-left: 6px; }

/* SY Pile */
body.busy { cursor: progress; } body.busy .btn-primary { opacity: .6; pointer-events: none; }
.rtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 16px; }
.rtile { border: 2px solid var(--sy-ink, #141414); padding: 12px 14px; background: var(--sy-bg, #fff); display: flex; flex-direction: column; gap: 2px; }
.rtile span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--sy-muted, #5b6470); font-weight: 700; }
.rtile b { font: 800 22px/1.15 'Inter Tight', Inter, sans-serif; } .rtile small { font-size: 12px; color: var(--sy-muted, #5b6470); }
.rtile.ok b { color: #1a7f37; } .rtile.bad b { color: #b42318; }
.dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 16px; margin-top: 14px; } .dgrid.one { grid-template-columns: minmax(0, 620px); margin-top: 0; }
.dchart-head { font-size: 13px; margin: 0 0 2px; } .dchart-head span { color: var(--sy-muted, #5b6470); }
.dchart-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--sy-muted, #5b6470); margin: 0 0 4px; }
.dchart-legend i, .dchart-tip i { display: inline-block; width: 14px; height: 3px; margin-right: 5px; vertical-align: middle; }
.dchart-tip { position: absolute; z-index: 5; pointer-events: none; background: #141414; color: #fff; padding: 6px 9px; font-size: 12px; line-height: 1.45; white-space: nowrap; }
.dchart-tip-z { font-size: 11px; opacity: .75; } .dchart-tip b { font-weight: 700; }
ul.notes { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } ul.notes li { padding: 8px 12px; border-left: 4px solid var(--sy-bg-3, #d0d4da); background: var(--sy-bg-2, #f4f5f7); font-size: 13px; }
ul.notes li.warn { border-left-color: #b7791f; } ul.notes li.bad { border-left-color: #b42318; } ul.notes li b { margin-right: 6px; }
td.estv { color: #1d5fd1; font-weight: 600; } table.t td .sub { font-size: 11.5px; color: var(--sy-muted, #5b6470); }
#syHdrSoil { text-transform: none; }