/* ==========================================================================
   Irrigation — the module's own shapes. Tokens only (tokens.css).

   1. The field sheet: the one page of the module that is worked with a thumb,
      outdoors, so its targets are 44px and its text is never below 14px.
   ========================================================================== */

/* ---- 1. The field sheet ------------------------------------------------- */

.qc-fieldsheet {
  max-width: 44rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.qc-fieldsheet__head {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.qc-fieldsheet__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font: 650 var(--qc-fs-2xl)/1.2 var(--qc-font-display);
}
.qc-fieldsheet__access {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  margin: .25rem 0 0;
  padding: .6rem .75rem;
  border-radius: var(--qc-radius-input);
  background: var(--qc-field-bg);
  color: var(--qc-text-primary);
}
.qc-fieldsheet__access .ti { color: var(--qc-text-secondary); }

.qc-fieldsheet__lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.qc-fieldline {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .8rem .85rem;
  border: 1px solid var(--qc-border);
  border-radius: var(--qc-radius-card);
  background: var(--qc-surface);
  transition: border-color var(--qc-dur-fast) var(--qc-ease-fast);
}
/* A line nobody has answered is the one holding the visit open. It is said
   with a heavier edge, never with colour alone: the answered ones carry a
   pill with a word in it. */
.qc-fieldline.is-pending { border-style: dashed; border-color: var(--qc-text-tertiary); }
.qc-fieldline.is-busy { border-color: var(--qc-primary); }

.qc-fieldline__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.qc-fieldline__label { font-weight: 600; min-width: 0; }

.qc-fieldline__answers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}
.qc-fieldline__answer {
  min-height: 44px;
  padding: .4rem .5rem;
  border: 1px solid var(--qc-border);
  border-radius: var(--qc-radius-btn);
  background: var(--qc-field-bg);
  color: var(--qc-text-secondary);
  font: 600 var(--qc-fs-md)/1.2 var(--qc-font-body);
  cursor: pointer;
  transition: background-color var(--qc-dur-fast) var(--qc-ease-fast),
              border-color var(--qc-dur-fast) var(--qc-ease-fast),
              color var(--qc-dur-fast) var(--qc-ease-fast);
}
.qc-fieldline__answer:hover:not(:disabled) { color: var(--qc-text-primary); border-color: var(--qc-text-tertiary); }
.qc-fieldline__answer:focus-visible { outline: 2px solid var(--qc-primary); outline-offset: 2px; }
.qc-fieldline__answer:disabled { cursor: default; }
.qc-fieldline__answer[aria-pressed="true"] { color: var(--qc-text-primary); }
.qc-fieldline__answer--ok[aria-pressed="true"] {
  background: color-mix(in srgb, var(--qc-status-green) 24%, var(--qc-surface));
  border-color: color-mix(in srgb, var(--qc-status-green) 60%, transparent);
}
.qc-fieldline__answer--fault[aria-pressed="true"] {
  background: color-mix(in srgb, var(--qc-status-red) 22%, var(--qc-surface));
  border-color: color-mix(in srgb, var(--qc-status-red) 60%, transparent);
}
.qc-fieldline__answer--na[aria-pressed="true"] {
  background: color-mix(in srgb, var(--qc-text-tertiary) 22%, var(--qc-surface));
  border-color: var(--qc-text-tertiary);
}

.qc-fieldline__more > summary {
  cursor: pointer;
  color: var(--qc-text-secondary);
  font-size: var(--qc-fs-md);
  padding: .35rem 0;
}
.qc-fieldline__more > summary:focus-visible { outline: 2px solid var(--qc-primary); outline-offset: 2px; }
.qc-fieldline__more[open] > summary { margin-bottom: .4rem; }

.qc-fieldline__photos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
}
.qc-fieldline__photo { position: relative; display: inline-flex; }
.qc-fieldline__thumb {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: var(--qc-radius-input);
  overflow: hidden;
  border: 1px solid var(--qc-border);
}
.qc-fieldline__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qc-fieldline__unphoto {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--qc-border);
  border-radius: var(--qc-radius-pill);
  background: var(--qc-surface-raised);
  color: var(--qc-text-primary);
  cursor: pointer;
}
.qc-fieldline__unphoto:focus-visible { outline: 2px solid var(--qc-primary); outline-offset: 2px; }
.qc-fieldline__addphoto { min-height: 44px; display: inline-flex; align-items: center; }
.qc-fieldline__addphoto.is-busy { pointer-events: none; color: var(--qc-text-tertiary); }

.qc-fieldline__fault {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding-top: .7rem;
  border-top: 1px solid var(--qc-border);
}
.qc-fieldline__fault .form-label { margin: 0; }
.qc-fieldline__fault .btn { min-height: 44px; align-self: flex-start; }
.qc-fieldline__raised { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; }

.qc-fieldsheet__foot {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: space-between;
  align-items: center;
  padding: .75rem .85rem calc(.75rem + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--qc-border);
  border-radius: var(--qc-radius-card);
  background: var(--qc-surface-raised);
  box-shadow: var(--qc-shadow-md);
}
.qc-fieldsheet__close { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  .qc-fieldline,
  .qc-fieldline__answer { transition: none; }
}

/* ---- 2. The faults ------------------------------------------------------ */

/* The photographs a fault came with, under its words. */
.qc-faultphotos {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .4rem;
}

/* "One job for the faults ticked": the sentence on the left, the act on the
   right, under the table it acts on. */
.qc-faultrepair {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid var(--qc-border);
}
.qc-faultrepair > p { flex: 1 1 16rem; min-width: 0; }

/* ---- 3. A job's own pages: the system it is about ----------------------- */

.qc-workirr { display: flex; flex-direction: column; gap: .7rem; }
.qc-workirr__system { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.qc-workirr__name {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--qc-text-primary);
  text-decoration: none;
}
.qc-workirr__name .ti { color: var(--qc-primary); }
a.qc-workirr__name:hover,
a.qc-workirr__name:focus-visible { text-decoration: underline; }
.qc-workirr__line {
  display: flex;
  gap: .45rem;
  align-items: baseline;
  margin: 0;
  font-size: var(--qc-fs-md);
}
.qc-workirr__line .ti { color: var(--qc-text-secondary); flex: none; }
.qc-workirr__faults {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: var(--qc-fs-md);
}
.qc-workirr__faults li { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.qc-workirr__field { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; }
/* On the job page and the report page the same block sits in a well, above the
   fields: it is something to read before typing, not one of the fields. */
.qc-workirr-card {
  padding: .85rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--qc-border);
  border-radius: var(--qc-radius-card);
  background: var(--qc-field-bg);
}

/* ---- 4. The contract pane ----------------------------------------------- */

/* The agreement a season is sold under: its chip, its state, its dates. */
.qc-seasonagreement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .4rem .6rem;
  min-width: 0;
}

/* ---- 5. The season across every system ---------------------------------- */

.qc-campaign { display: flex; flex-direction: column; gap: .85rem; }
.qc-campaign > .row { margin-bottom: 0 !important; }
.qc-campaign__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1rem;
}
/* The window the picked jobs are promised in, beside the button that makes
   them: two dates are one datum. */
.qc-campaign__bar { flex-wrap: wrap; row-gap: .4rem; }
.qc-campaign__day {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  font-size: var(--qc-fs-sm);
  color: var(--qc-text-secondary);
}
.qc-campaign__day input { width: 9.5rem; }

/* A frost in the forecast over systems still full of water: a sentence, with
   its glyph, never colour alone. */
.qc-frostnote {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 0;
  padding: .6rem .85rem;
  border-radius: var(--qc-radius-input);
  border: 1px solid color-mix(in srgb, var(--qc-info) 45%, transparent);
  background: color-mix(in srgb, var(--qc-info) 14%, var(--qc-surface));
  color: var(--qc-text-primary);
}
.qc-frostnote .ti { color: var(--qc-info-text); }

/* ---- 6. The visit's report --------------------------------------------- */

/* The document on the left, as the customer will read it; what the office
   does with it on the right. One column on a phone. */
.qc-visitreport {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  gap: 1rem;
  align-items: start;
}
@media (max-width: 62rem) {
  .qc-visitreport { grid-template-columns: minmax(0, 1fr); }
}
.qc-visitreport__title { font: 650 var(--qc-fs-2xl)/1.2 var(--qc-font-display); margin: 0 0 .25rem; }
.qc-visitreport__doc h3 { font: 600 var(--qc-fs-xl)/1.3 var(--qc-font-display); margin: 1.1rem 0 .4rem; }
.qc-visitreport__doc table { width: 100%; border-collapse: collapse; }
.qc-visitreport__doc th,
.qc-visitreport__doc td {
  text-align: left;
  vertical-align: top;
  padding: .45rem .5rem;
  border-bottom: 1px solid var(--qc-border);
}
.qc-visitreport__doc th { color: var(--qc-text-secondary); font-size: var(--qc-fs-sm); font-weight: 600; }
.qc-visitreport__note { padding: .65rem .8rem; border-radius: var(--qc-radius-input); background: var(--qc-field-bg); }
.qc-visitreport__photos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.qc-visitreport__photos img {
  width: 150px;
  height: 112px;
  object-fit: cover;
  border-radius: var(--qc-radius-input);
  border: 1px solid var(--qc-border);
}
.qc-visitreport__send { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--qc-border); }

/* ---- 7. The system's overview ------------------------------------------- */

/* The place: how to get in on the left, the site as a picture on the right.
   The picture is the job sheet's own mosaic (App\Map\StaticTiles), cut at a
   zoom where a garden is a garden, with the pin held at the centre of the
   frame and the mosaic moved under it. */
.qc-irrhero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 20rem);
  overflow: hidden;
  margin-bottom: 1rem;
}
.qc-irrhero__text {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1rem 1.1rem;
  min-width: 0;
}
.qc-irrhero__season { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: 0; }
.qc-irrhero__line { display: flex; gap: .5rem; align-items: baseline; margin: 0; }
.qc-irrhero__line .ti { color: var(--qc-text-secondary); flex: none; }
.qc-irrhero__map { position: relative; min-height: 11rem; overflow: hidden; background: var(--qc-field-bg); }
.qc-irrhero__tiles {
  position: absolute;
  left: calc(50% - 512px * var(--pin-x, 50) / 100);
  top: calc(50% - 512px * var(--pin-y, 50) / 100);
  display: grid;
  grid-template-columns: repeat(2, 256px);
  width: 512px;
  height: 512px;
}
.qc-irrhero__tiles img { display: block; width: 256px; height: 256px; }
[data-bs-theme="dark"] .qc-irrhero__tiles img { opacity: .78; filter: brightness(.72) saturate(.85); }
.qc-irrhero__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -20px 0 0 -10px;
  border-radius: 50% 50% 50% 0;
  background: var(--qc-primary);
  border: 2px solid var(--qc-surface);
  transform: rotate(-45deg);
  box-shadow: var(--qc-shadow-sm);
}
.qc-irrhero__mapbtn { position: absolute; right: .6rem; bottom: .6rem; background: var(--qc-surface-raised); }
@media (max-width: 48rem) {
  .qc-irrhero { grid-template-columns: minmax(0, 1fr); }
}

.qc-irrtiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.qc-irrtile,
.qc-irrblock {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1rem 1.1rem;
  min-width: 0;
}
.qc-irrblock { margin-bottom: 1rem; }
.qc-irrtile__head {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font: 600 var(--qc-fs-xl)/1.2 var(--qc-font-display);
}
.qc-irrtile__head .ti { color: var(--qc-text-secondary); }
.qc-irrtile__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: var(--qc-fs-md);
}
.qc-irrtile__list li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; }
/* The way to the panel that holds the rest: at the foot of the tile. */
.qc-irrtile__more {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  margin-top: auto;
  padding-top: .25rem;
  font-size: var(--qc-fs-md);
  font-weight: 600;
  text-decoration: none;
}
a.qc-irrtile__more:hover,
a.qc-irrtile__more:focus-visible { text-decoration: underline; }

/* The stations, in the order printed on the controller. */
.qc-stations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: .5rem;
}
.qc-station {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .55rem .65rem;
  border-radius: var(--qc-radius-input);
  background: var(--qc-field-bg);
  border: 1px solid transparent;
  min-width: 0;
  font-size: var(--qc-fs-md);
}
.qc-station b { font: 650 var(--qc-fs-xl)/1 var(--qc-font-display); }
.qc-station__name { font-weight: 600; overflow-wrap: anywhere; }
.qc-station__meta { color: var(--qc-text-secondary); font-size: var(--qc-fs-xs); }
.qc-station.is-faulty { border-color: color-mix(in srgb, var(--qc-status-red) 60%, transparent); }
.qc-station__flag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: var(--qc-fs-xs);
  font-weight: 600;
  color: var(--qc-text-primary);
}
.qc-station__flag .ti { color: var(--qc-status-red); }

.qc-irrfacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .6rem 1rem;
  margin: 0;
}
.qc-irrfacts dt { font-size: var(--qc-fs-xs); font-weight: 600; color: var(--qc-text-secondary); }
.qc-irrfacts dd { margin: 0; }

/* ---- 8. The meter, as a picture ---------------------------------------- */

.qc-meterchart { display: block; width: 100%; height: auto; max-height: 14rem; }
.qc-meterchart__axis { stroke: var(--qc-border); stroke-width: 1; }
.qc-meterchart__bar { fill: color-mix(in srgb, var(--qc-info) 55%, var(--qc-surface)); }
.qc-meterchart__bar.is-last { fill: var(--qc-info); }
.qc-meterchart__value { fill: var(--qc-text-primary); font: 600 var(--qc-fs-xs) var(--qc-font-body); font-variant-numeric: tabular-nums; }
.qc-meterchart__label { fill: var(--qc-text-secondary); font: 400 var(--qc-fs-xs) var(--qc-font-body); font-variant-numeric: tabular-nums; }
.qc-meterchart__programme { stroke: var(--qc-text-primary); stroke-width: 1.5; stroke-dasharray: 6 4; }

/* ---- 9. The components' map -------------------------------------------- */

.qc-compmap { height: 22rem; border-radius: var(--qc-radius-input); overflow: hidden; }
/* A numbered pin: the number is the row's own, so the table under the map is
   its legend. Ink on the surface, edged, so it reads over grass and gravel. */
.qc-numpin {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--qc-surface);
  color: var(--qc-text-primary);
  border: 2px solid var(--qc-text-primary);
  font: 700 var(--qc-fs-xs)/1 var(--qc-font-body);
  box-shadow: var(--qc-shadow-sm);
}
.qc-numpin--main { background: var(--qc-primary); color: var(--qc-on-primary); border-color: var(--qc-surface); }

/* The meter's line on the field sheet: the figure and the button that takes
   it, on one row — a number and its act are one datum. */
.qc-fieldline__reading { display: flex; flex-direction: column; gap: .35rem; }
.qc-fieldline__reading .form-label { margin: 0; }
.qc-fieldline__readingrow { display: flex; gap: .5rem; }
.qc-fieldline__readingrow input { min-height: 44px; flex: 1 1 8rem; min-width: 0; }
.qc-fieldline__readingrow .btn { min-height: 44px; }

/* ---- 10. The budget ---------------------------------------------------- */

.qc-budget { display: flex; flex-direction: column; gap: .75rem; }
.qc-budget__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.qc-budget__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .6rem 1rem;
}
.qc-budget__figures > div { display: flex; flex-direction: column; min-width: 0; }
.qc-budget__figures b { font: 650 var(--qc-fs-2xl)/1.2 var(--qc-font-display); }
.qc-budget__figures span { font-size: var(--qc-fs-sm); color: var(--qc-text-secondary); }
/* The need, split to scale. Two washes of two different hues, and each part
   carries its word: the picture is never read by colour alone. */
.qc-budget__bar {
  display: flex;
  height: 1.75rem;
  border-radius: var(--qc-radius-input);
  overflow: hidden;
  background: var(--qc-field-bg);
  font: 600 var(--qc-fs-xs)/1.75rem var(--qc-font-body);
  color: var(--qc-text-primary);
}
.qc-budget__bar > span { padding-inline: .5rem; white-space: nowrap; overflow: hidden; min-width: 0; }
.qc-budget__rain { background: color-mix(in srgb, var(--qc-info) 42%, var(--qc-surface)); }
.qc-budget__water { background: color-mix(in srgb, var(--qc-primary) 28%, var(--qc-surface)); }

/* ---- 11. The sectors' grid --------------------------------------------- */

.qc-sectorgrid { display: flex; flex-direction: column; gap: .75rem; }
.qc-sectorgrid table { min-width: 62rem; }
.qc-sectorgrid td { vertical-align: top; padding-block: .35rem; }
.qc-sectorgrid__n { width: 6.5rem; }
.qc-sectorgrid__n input { text-align: end; font-variant-numeric: tabular-nums; }
.qc-sectorgrid__name { min-width: 12rem; }
.qc-sectorgrid__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
/* A new system's steps hold the sectors' grid, which is a table: the stepped
   card takes the page's width rather than the 60rem a column of fields wants. */
.qc-stepcard.qc-stepcard--wide { max-width: none; }

/* ---- 12. The systems' map ---------------------------------------------- */

/* The card a pin opens: a system's name, whose it is, how its season stands,
   and the way to its sheet. Several on one doorstep are ruled apart. */
.qc-irrmapcard { display: flex; flex-direction: column; gap: .6rem; min-width: 13rem; }
.qc-irrmapcard__item { display: flex; flex-direction: column; gap: .1rem; font-size: var(--qc-fs-md); }
.qc-irrmapcard__item + .qc-irrmapcard__item { padding-top: .6rem; border-top: 1px solid var(--qc-border); }
.qc-irrmapcard__item b { font-size: var(--qc-fs-lg); }
.qc-irrmapcard__item span { color: var(--qc-text-secondary); }
.qc-irrmapcard__item a { font-weight: 600; margin-top: .2rem; }

/* The sectors' table: seven columns of figures before a row's two actions.
   The actions sit one over the other and the cells are tightened, so the last
   button stays inside the card. The cell is a real table cell again — the
   shared recipe lays a row's actions out as a flex box, which on a <td> takes
   it out of the table's own layout. */
td.qc-rowactions--stack { display: table-cell; white-space: normal; vertical-align: middle; width: 1%; }
.qc-rowactions--stack > a,
.qc-rowactions--stack > form { display: block; }
.qc-rowactions--stack > form { margin-top: .25rem; }
.qc-rowactions--stack .btn { width: 100%; justify-content: center; white-space: nowrap; }
.qc-sectortable th,
.qc-sectortable td { padding-inline: .4rem; }
.qc-sectortable th { white-space: normal; vertical-align: bottom; }