/* ---- V1.64 the environment app (env-): Client\Apps\EnvReport (EnvironmentPage and its tabs). Design system tokens only (--os-*), full
   page width; a new app file: every design guard at zero (DesignGuardTests.ZeroTolerance: "Apps/EnvReport/", "environment.css"). ---- */

.env-page { display: flex; flex-direction: column; gap: var(--os-space-4); min-width: 0; }
.env-page > * { min-width: 0; max-width: 100%; }
.env-page .os-pagehead > * { min-width: 0; }

/* The main column and its side panel: side by side from 1200 px, stacked below */
.env-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--os-space-4); align-items: start; }
@media (min-width: 1200px) {
    .env-grid { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); }
    .env-grid--events { grid-template-columns: minmax(0, 1.3fr) minmax(420px, 1fr); }
}
.env-main, .env-side { display: flex; flex-direction: column; gap: var(--os-space-4); min-width: 0; }
.env-side--wide { min-width: 0; }

/* The event's form */
.env-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--os-space-3); }
.env-form--pad { padding: var(--os-space-3); }
.env-form .env-wide { grid-column: 1 / -1; }
.env-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--os-space-2); margin-top: var(--os-space-3); }
.env-actions--start { justify-content: flex-start; }
.env-inline { flex-wrap: wrap; gap: var(--os-space-2); align-items: flex-end; }
.env-text { margin: var(--os-space-2) 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.env-num { width: 100%; font-variant-numeric: tabular-nums; }

/* The event's facts */
.env-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--os-space-3); margin-top: var(--os-space-3); overflow-wrap: anywhere; }

/* The counts by type and severity */
.env-bar { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(80px, 2fr) auto; gap: var(--os-space-2); align-items: center; padding: var(--os-space-1) 0; }
.env-bar strong { font-variant-numeric: tabular-nums; }

/* The photos */
.env-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--os-space-2); }
.env-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--os-border-w) solid var(--os-border-subtle);
    border-radius: var(--os-radius-sm); background: var(--os-surface-sunken); }
.env-photo--loading { overflow: hidden; }
.env-file { max-width: 100%; margin-top: var(--os-space-3); font: var(--os-type-body); color: var(--os-text-2); }

.env-notice .env-text { color: var(--os-text); }

/* ---- V1.69 the premium pass (mockup 27, approved): the overview, its charts, the sampling plan, the reports, the phone's own samples ---- */
.env-page .os-grid { align-items: start; }
/* A flush panel has no padding: its footer sits inside it (the shared rule pulls it out by the padding) */
.env-page .os-panel--flush > .os-panel__foot { margin: 0; }
.env-stack { display: grid; gap: var(--os-gutter); min-width: 0; }
.env-col { --span: 4; display: grid; gap: var(--os-gutter); align-content: start; min-width: 0; }
.env-col.env-col--8 { --span: 8; }
.env-click { cursor: pointer; }
.env-nowrap { white-space: nowrap; }
.env-bad { color: var(--os-bad-text); }
.env-cell { display: grid; gap: var(--os-space-0h); min-width: 0; }
.env-pad { padding: 0 var(--os-space-4) var(--os-space-4); }
.env-num-sm { width: 4.5rem; }
.env-num-md { width: 8rem; }
.env-hide-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.env-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--os-space-1) var(--os-space-4); margin: 0; font: var(--os-type-small); }
.env-dl dt { color: var(--os-text-2); }
.env-dl dd { margin: 0; font-variant-numeric: tabular-nums; }

/* The period's dates */
.env-range { position: relative; }
.env-range__pop { position: absolute; z-index: 20; right: 0; top: calc(100% + var(--os-space-1)); gap: var(--os-space-2); align-items: flex-end; flex-wrap: nowrap;
    padding: var(--os-space-3); background: var(--os-surface-raised); border: var(--os-border-w) solid var(--os-border); border-radius: var(--os-radius-md); box-shadow: var(--os-shadow-3); }

/* Charts drawn in SVG: the text and lines on the chart tokens */
.env-svg { display: block; width: 100%; height: auto; overflow: visible; }
.env-t { fill: var(--os-chart-label); }
.env-t--2 { fill: var(--os-text-2); }
.env-t--strong { fill: var(--os-text); font-weight: 600; }
.env-t--group { fill: var(--os-text-2); font-weight: 600; letter-spacing: 0.02em; }
.env-t--bad { fill: var(--os-bad-text); font-weight: 600; }
.env-t--warn { fill: var(--os-warn-text); font-weight: 600; }
.env-t--ok { fill: var(--os-text); font-weight: 600; }
.env-gridline { stroke: var(--os-chart-grid); stroke-width: 1; }
.env-axis { stroke: var(--os-chart-axis); stroke-width: 1; }
.env-limit { stroke: var(--os-bad); stroke-width: 1.5; stroke-dasharray: 5 4; }
.env-near { stroke: var(--os-warn); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.8; }
.env-target { stroke: var(--os-chart-target); stroke-width: 1.5; stroke-dasharray: 5 4; }
.env-dot { stroke: var(--os-surface); stroke-width: 1.5; }
.env-dot--bad { fill: var(--os-bad); }
.env-dot--warn { fill: var(--os-warn); }
.env-dot--ok { fill: var(--os-chart-1); }

/* Compliance against permit limits */
.env-cmp__near { fill: var(--os-warn-soft); opacity: 0.7; }
.env-cmp__over { fill: var(--os-bad-soft); opacity: 0.8; }
.env-cmp__limit { stroke: var(--os-bad); stroke-width: 1.5; stroke-dasharray: 5 4; }
.env-cmp__nearline { stroke: var(--os-warn); stroke-dasharray: 3 3; }
.env-cmp__track { fill: var(--os-chart-grid); }
.env-cmp__bar--ok { fill: var(--os-chart-1); opacity: 0.75; }
.env-cmp__bar--warn { fill: var(--os-warn); opacity: 0.9; }
.env-cmp__bar--bad { fill: var(--os-bad); opacity: 0.9; }
.env-cmp__dot { fill: var(--os-text); stroke: var(--os-surface); stroke-width: 1.5; }

/* Needs attention now */
.env-attn { list-style: none; margin: 0; padding: 0; }
.env-attn li { display: flex; align-items: flex-start; gap: var(--os-space-3); padding: var(--os-space-3) var(--os-space-4); border-top: var(--os-border-w) solid var(--os-border-subtle); }
.env-attn li:first-child { border-top: 0; }
.env-attn__icon { display: inline-flex; flex: none; padding: var(--os-space-1h); border-radius: var(--os-radius-md); background: var(--os-neutral-soft); color: var(--os-neutral-text); }
.env-attn li.is-bad .env-attn__icon { background: var(--os-bad-soft); color: var(--os-bad-text); }
.env-attn li.is-warn .env-attn__icon { background: var(--os-warn-soft); color: var(--os-warn-text); }
.env-attn li.is-info .env-attn__icon { background: var(--os-info-soft); color: var(--os-info-text); }
.env-attn__text { display: grid; gap: var(--os-space-1); flex: 1; min-width: 0; }
.env-attn__text p { margin: 0; color: var(--os-text-2); font: var(--os-type-small); }
.env-attn__head { gap: var(--os-space-2); flex-wrap: wrap; }

/* The four trends */
.env-minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--os-space-5) var(--os-space-6); }
.env-mini { display: grid; gap: var(--os-space-1); min-width: 0; }
.env-mini__head { display: flex; flex-wrap: wrap; gap: var(--os-space-2); align-items: baseline; font: var(--os-type-small); }
.env-mini__line { fill: none; stroke: var(--os-chart-1); stroke-width: 1.75; stroke-linejoin: round; }
.env-mini__rain { fill: var(--os-chart-2); opacity: 0.45; }
.env-mini__stem { stroke: var(--os-chart-1); stroke-width: 2; }

/* The brief */
.env-brief { display: grid; gap: var(--os-gutter); }
.env-brief__foot { margin: 0; }

/* Events by type and severity: the sequential ramp */
.env-sev--1, .env-sev-swatch--1 { fill: var(--os-seq-1); background: var(--os-seq-1); }
.env-sev--2, .env-sev-swatch--2 { fill: var(--os-seq-3); background: var(--os-seq-3); }
.env-sev--3, .env-sev-swatch--3 { fill: var(--os-seq-5); background: var(--os-seq-5); }
.env-sev--4, .env-sev-swatch--4 { fill: var(--os-seq-6); background: var(--os-seq-6); }
.env-sev--5, .env-sev-swatch--5 { fill: var(--os-seq-7); background: var(--os-seq-7); }
.env-sev-legend { flex-wrap: wrap; margin-top: var(--os-space-2); }

/* The week's sampling plan */
.env-week { display: grid; gap: var(--os-space-1); overflow-x: auto; }
.env-week__row { display: grid; grid-template-columns: minmax(9rem, 1.6fr) repeat(7, minmax(1.75rem, 1fr)); gap: var(--os-space-1); align-items: center; }
.env-week__row--head span { text-align: center; font: var(--os-type-caption); color: var(--os-text-2); }
.env-week__row--head span.is-today { color: var(--os-text); font-weight: 600; }
.env-week__name { display: grid; min-width: 0; font: var(--os-type-small); }
.env-week__name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.env-week__cell { display: inline-flex; align-items: center; justify-content: center; height: 1.75rem; padding: 0; border-radius: var(--os-radius-sm);
    border: var(--os-border-w) solid transparent; background: transparent; color: var(--os-text); }
.env-week__cell svg { width: 1rem; height: 1rem; }
.env-week__cell--none { background: var(--os-surface-sunken); opacity: 0.5; }
.env-week__cell--done { background: var(--os-chart-1); color: var(--os-inverse-text); }
.env-week__cell--over { background: var(--os-warn-soft); border-color: var(--os-warn); color: var(--os-warn-text); }
.env-week__cell--due { border-color: var(--os-border-strong); }
.env-week__cell--overdue { border-color: var(--os-bad); color: var(--os-bad-text); background: var(--os-bad-soft); }
.env-week__cell--missed { border-color: var(--os-border-strong); color: var(--os-text-2); background: var(--os-neutral-soft); }
.env-week__cell.is-today { outline: 2px solid var(--os-accent); outline-offset: 1px; }
button.env-week__cell:not(:disabled) { cursor: pointer; }
.env-week__legend { flex-wrap: wrap; margin-top: var(--os-space-3); }
.env-week__key { width: 0.875rem; height: 0.875rem; margin-right: var(--os-space-1); }

/* The reports due */
.env-reports { list-style: none; margin: 0; padding: 0; }
.env-reports li { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(5.5rem, auto); gap: var(--os-space-3); align-items: center; padding: var(--os-space-3) var(--os-space-4);
    border-top: var(--os-border-w) solid var(--os-border-subtle); }
.env-reports li:first-child { border-top: 0; }
.env-reports__text { display: grid; min-width: 0; }
.env-reports__state { display: grid; gap: var(--os-space-1); justify-items: end; min-width: 5.5rem; }
.env-reports li.is-late .env-date { background: var(--os-bad-soft); color: var(--os-bad-text); }
.env-date { display: grid; justify-items: center; min-width: 2.75rem; padding: var(--os-space-1); border-radius: var(--os-radius-sm); background: var(--os-warn-soft); color: var(--os-warn-text); }
.env-date b { font: var(--os-type-h4); }
.env-date span { font: var(--os-type-caption); }
.env-page tr.is-late td { background: var(--os-bad-soft); }

/* The water balance and the GHG */
.env-flow__node { fill: var(--os-text-2); }
.env-flow__band { opacity: 0.34; }
.env-flow--water { fill: var(--os-chart-2); }
.env-flow--rain { fill: var(--os-chart-6); }
.env-flow--ground { fill: var(--os-chart-3); }
.env-flow--tail { fill: var(--os-chart-4); }
.env-flow--other { fill: var(--os-chart-other); }
.env-ghg__s1 { fill: var(--os-chart-1); }
.env-ghg__s2 { fill: var(--os-chart-2); }
.env-ghg__past { opacity: 0.8; }
.env-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--os-space-4); margin-top: var(--os-space-4); padding-top: var(--os-space-3);
    border-top: var(--os-border-w) solid var(--os-border-subtle); }
.env-figures > div { display: grid; gap: var(--os-space-0h); }
.env-figures b { font: var(--os-type-kpi-sm); font-variant-numeric: tabular-nums; }

/* The events and their follow-up */
.env-events td { vertical-align: top; }

/* The phone's own samples */
.env-mine { display: grid; gap: var(--os-gutter); }
.env-mine__head { display: grid; gap: var(--os-space-2); padding: var(--os-space-3) var(--os-space-4); }
.env-mine__bar { display: flex; gap: var(--os-space-1); }
.env-mine__bar i { flex: 1; height: 0.5rem; border-radius: var(--os-radius-pill); background: var(--os-surface-sunken); border: var(--os-border-w) solid var(--os-border); }
.env-mine__bar i.d { background: var(--os-chart-1); border-color: transparent; }
.env-mine__bar i.c { background: var(--os-chart-1); opacity: 0.6; }
.env-mine__bar i.o { background: var(--os-bad); border-color: transparent; }
.env-mine__count { gap: var(--os-space-2); font: var(--os-type-small); }
.env-mine__task { display: grid; gap: var(--os-space-3); }
.env-mine__meta { gap: var(--os-space-2); }
.env-mine__name { font: var(--os-type-h3); margin: 0; }
.env-mine__how { margin: 0; }
.env-mine__item { display: grid; gap: var(--os-space-2); padding-top: var(--os-space-3); border-top: var(--os-border-w) solid var(--os-border-subtle); }
.env-mine__reading { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--os-space-3); align-items: center; }
.env-mine__value { display: flex; align-items: baseline; gap: var(--os-space-1); padding: var(--os-space-2) var(--os-space-3); border: var(--os-border-w) solid var(--os-border-input);
    border-radius: var(--os-radius-md); background: var(--os-field); }
.env-mine__value.is-near { border-color: var(--os-warn); background: var(--os-warn-soft); }
.env-mine__value.is-over { border-color: var(--os-bad); background: var(--os-bad-soft); }
.env-mine__input { flex: 1; min-width: 0; border: 0; background: transparent; text-align: right; font: var(--os-type-kpi-sm); color: var(--os-text); }
.env-mine__input:focus { outline: none; }
.env-mine__limits { display: grid; gap: var(--os-space-1); justify-items: end; text-align: right; }
.env-mine__media { display: flex; flex-wrap: wrap; gap: var(--os-space-2); align-items: center; padding-top: var(--os-space-3); border-top: var(--os-border-w) solid var(--os-border-subtle); }
.env-mine__thumb { width: 4.5rem; height: 3.5rem; object-fit: cover; border-radius: var(--os-radius-sm); border: var(--os-border-w) solid var(--os-border); }
.env-mine__add { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border: var(--os-border-w) dashed var(--os-border-strong);
    border-radius: var(--os-radius-sm); color: var(--os-text-2); cursor: pointer; }
.env-mine__where { text-align: left; }
.env-mine__actions { display: grid; gap: var(--os-space-2); }
.env-mine__sync { display: inline-flex; align-items: center; gap: var(--os-space-1); color: var(--os-good-text); }
.env-mine__buttons { gap: var(--os-space-2); flex-wrap: wrap; }
.env-mine__buttons .os-btn { flex: 1 1 10rem; justify-content: center; white-space: normal; }

/* Narrower screens: the trends stack under 900 px */
@media (max-width: 899.98px) {
    .env-minis { grid-template-columns: minmax(0, 1fr); }
}

/* Phone: the person's own samples first, the overview one tap away; wider screens never show the phone's switch */
.env-phone-only { display: none; }
@media (max-width: 639.98px) {
    .env-phone-only { display: block; }
    .env-phone-only.env-hidden, .env-phone-hide { display: none; }
    .env-phone-switch .os-seg { width: 100%; }
    .env-range__pop { right: auto; left: 0; flex-wrap: wrap; }
    /* The person's own samples come first: the header's meta lines stay on wider screens */
    .env-page .os-pagehead__meta { display: none; }
}