/* /field/ section. Uses the site's own tokens; no new colours. */

/* ---------- Hero, shared by the index and each tool ---------- */
.ft-hero { padding-block: clamp(var(--space-8), 6vw, var(--space-12)); }
.ft-hero h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-2); }
.ft-hero p { max-width: 60ch; font-size: var(--text-base); margin: 0 0 var(--space-3); }
.ft-hero .ft-lead { font-size: var(--text-lg); }
.ft-note { font-size: var(--text-xs); opacity: .7; max-width: 70ch; }

/* ---------- Index: one card per tool ---------- */
.ft-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.ft-card { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); align-items: center;
  padding: var(--space-5); background: var(--color-surface-light); border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md); color: inherit; text-decoration: none; }
.ft-card:hover { border-color: var(--color-accent); }
.ft-card .ft-card-title { font-weight: 800; font-size: var(--text-lg); }
.ft-card .ft-card-desc { grid-column: 1 / -1; font-size: var(--text-sm); opacity: .8; }
.ft-card .ft-card-open { font-weight: 700; color: var(--color-accent); white-space: nowrap; }

/* ---------- Calculator layout ----------
   Phone: toggles, drawing (sticky), sliders, results, with a fixed order bar.
   Desktop: controls left, drawing and results right. */
.fc-app { display: grid; gap: var(--space-5);
  grid-template-areas: "toggles" "drawing" "sliders" "results"; }
.fc-toggles { grid-area: toggles; }
.fc-drawing { grid-area: drawing; }
.fc-sliders { grid-area: sliders; }
.fc-results { grid-area: results; }
@media (min-width: 900px) {
  .fc-app { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6) var(--space-10);
    grid-template-areas: "toggles drawing" "sliders drawing" "sliders results"; align-items: start; }
  .fc-drawing, .fc-results { position: sticky; }
  .fc-drawing { top: var(--space-4); }
}

/* Segmented toggles and preset chips reuse the site's filter buttons. */
.fc-seg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: 0 0 var(--space-3); }
.fc-seg .filter-btn { min-height: 48px; font-size: var(--text-sm); letter-spacing: .06em; text-align: center; }
.fc-seg .filter-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.fc-seg--3 { grid-template-columns: repeat(3, 1fr); }
.fc-seg--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 480px) { .fc-seg--4 { grid-template-columns: repeat(4, 1fr); } }
.fc-seg--3 .filter-btn, .fc-seg--4 .filter-btn { font-size: var(--text-xs); padding-inline: var(--space-2); }

/* ---------- Pipe bedding calculator ----------
   One trench section. Material one (bed, haunch, and the whole embedment on a
   council job) is the darker grey; material two (TMR side zone and overlay) the
   lighter grey. Same greys as the swatches in the results. */
.fc-views--one { grid-template-columns: 1fr; }
.fc-views--one > svg { max-height: 38vh; }
.fb-fill { fill: var(--color-bg-light); stroke: none; }
.fb-m1 { fill: var(--color-text-muted-light); stroke: none; }
.fb-m2 { fill: var(--color-text-faint-light); stroke: none; }
.fb-wall { fill: none; stroke: var(--color-text-light); stroke-width: 1.2; }
.fb-pipe { fill: var(--color-surface-light); stroke: var(--color-text-light); stroke-width: 1.2; }
.fb-bore { fill: var(--color-bg-light); stroke: var(--color-text-light); stroke-width: .6; }
.fc-sw--m1 { background: var(--color-text-muted-light); }
.fc-sw--m2 { background: var(--color-text-faint-light); }
.fc-ord[hidden], .fc-ob[hidden] { display: none; }
.fc-val .fc-unit + .fc-unit { margin-left: var(--space-2); }

/* Over-dig cues: a panel with a two-colour meter, red strips on the drawing,
   and a red cell in the phone band. Red is the site accent, used only here. */
.fb-over { margin: var(--space-2) 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light); background: var(--color-bg-light); }
.fb-over--bad { border-color: var(--color-accent); background: var(--color-accent-dim); }
.fb-over-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.fb-over-title { font-weight: 800; font-size: var(--text-base); }
.fb-over-badge { font-weight: 800; font-size: var(--text-lg); opacity: .6; }
.fb-over--bad .fb-over-badge { color: var(--color-accent); opacity: 1; }
.fb-meter { display: flex; height: 14px; border-radius: var(--radius-full); overflow: hidden; margin: var(--space-2) 0; background: var(--color-border-light); }
.fb-meter-spec { background: var(--color-text-muted-light); }
.fb-meter-over { background: var(--color-accent); }
.fb-meter-legend { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-xs); opacity: .85; flex-wrap: wrap; }
.fc-sw--spec { background: var(--color-text-muted-light); }
.fc-sw--over { background: var(--color-accent); border-color: var(--color-accent); }
.fb-over-text { font-size: var(--text-sm); margin: var(--space-2) 0 0; }
.fb-overdig { fill: var(--color-accent); opacity: .6; stroke: none; }
.fb-spec { stroke: var(--color-accent); stroke-width: 1; stroke-dasharray: 4 3; }
.fb-over-lbl { font-size: 9px; font-weight: 800; fill: #ffffff; letter-spacing: .06em; }
.fc-ob--bad .fc-ob-v, .fc-ob--bad .fc-ob-l { color: var(--color-accent); }

/* ---------- Trench excavation and spoil ---------- */
.fc-sw--cut { background: var(--color-bg-light); }
.fc-sw--spoil { background: var(--color-text-light); }
.ft-native { fill: url(#ft-hatch); stroke: none; }
.ft-hatch-line { stroke: var(--color-text-faint-light); stroke-width: 1; }
.ft-ground { stroke: var(--color-text-light); stroke-width: 1.4; fill: none; }
.ft-trucks { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: var(--space-3) 0 0; }
.ft-truck { width: 30px; height: 18px; fill: var(--color-text-light); opacity: .85; }
.ft-truck--part { opacity: .35; }
.ft-trucks-more { font-size: var(--text-xs); font-weight: 700; opacity: .7; margin-left: var(--space-1); }
.ft-trucks-lbl { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; opacity: .7; margin: var(--space-3) 0 0; }
.fc-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; }
.fc-chips .filter-btn { min-height: 44px; font-size: var(--text-xs); }
.fc-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  opacity: .7; margin: 0 0 var(--space-2); }

/* Sliders. One row: name and editable value on top, the range below. */
.fc-row { margin: 0 0 var(--space-5); }
.fc-row[hidden] { display: none; }
.fc-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-1); }
.fc-row-head label { font-weight: 700; font-size: var(--text-sm); }
.fc-val { display: inline-flex; align-items: baseline; gap: var(--space-1); font-weight: 800; font-size: var(--text-lg); }
.fc-val input { width: 5.5ch; font: inherit; font-weight: 800; text-align: right; border: 0; border-bottom: 2px solid var(--color-border-light);
  background: transparent; color: inherit; padding: 0 var(--space-1); border-radius: 0; -moz-appearance: textfield; }
.fc-val input::-webkit-outer-spin-button, .fc-val input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fc-val input:focus { outline: none; border-bottom-color: var(--color-accent); }
.fc-val .fc-unit { font-size: var(--text-xs); font-weight: 700; opacity: .6; }
.fc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0; cursor: pointer; }
.fc-range:focus { outline: none; }
.fc-range::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-full); background: var(--color-border-light); }
.fc-range::-moz-range-track { height: 6px; border-radius: var(--radius-full); background: var(--color-border-light); }
.fc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -12px; border-radius: 50%;
  background: var(--color-accent); border: 3px solid var(--color-surface-light); box-shadow: var(--shadow-sm); }
.fc-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--color-accent);
  border: 3px solid var(--color-surface-light); box-shadow: var(--shadow-sm); }
.fc-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--color-accent-dim); }
.fc-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--color-accent-dim); }

/* Drawing block. Two SVGs, side by side on a phone so the sticky block stays short. */
.fc-drawing { background: var(--color-surface-light); border: 1px solid var(--color-border-light); border-radius: var(--radius-md);
  padding: var(--space-3); }
.fc-views svg { width: 100%; height: auto; display: block; }
.ft-hero .fc-caption { font-size: var(--text-xs); opacity: .75; margin: var(--space-2) 0 0; max-width: none; line-height: 1.35; }
/* Phone: the 3D, section and plan views are one swipeable strip so the pinned block stays short. */
.fc-views { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; gap: 0; }
.fc-views::-webkit-scrollbar { display: none; }
.fc-views > svg { flex: 0 0 100%; scroll-snap-align: start; max-height: 30vh; }
.fc-dots { display: flex; justify-content: center; gap: var(--space-2); margin: var(--space-2) 0 0; }
.fc-dots button { font: inherit; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  padding: var(--space-1) var(--space-3); min-height: 32px; border: 1px solid var(--color-border-light); border-radius: var(--radius-full);
  background: transparent; color: var(--color-text-muted-light); cursor: pointer; }
.fc-dots button.active { background: var(--color-text-light); border-color: var(--color-text-light); color: var(--color-surface-light); }
@media (max-width: 899px) {
  .fc-drawing { position: sticky; top: 0; z-index: 5; box-shadow: var(--shadow-sm); }
}
@media (min-width: 900px) {
  .fc-views { display: grid; grid-template-columns: 1fr; gap: var(--space-4); overflow: visible; }
  .fc-views > svg { max-height: none; }
  .fc-dots { display: none; }
}
.fc-hatch-line { stroke: var(--color-text-light); stroke-width: 1; opacity: .35; }
.fc-cutline { stroke: var(--color-text-light); stroke-width: 1; }
/* SVG fills. Walls mid grey, base slab darker grey, void white, dimensions muted, active dimension 6D red. */
.fc-wall { fill: var(--color-text-faint-light); stroke: var(--color-text-light); stroke-width: 1; }
.fc-base { fill: var(--color-text-muted-light); stroke: var(--color-text-light); stroke-width: 1; }
.fc-void { fill: var(--color-surface-light); stroke: none; }
.fc-joint { stroke: var(--color-text-light); stroke-width: 1; stroke-dasharray: 4 3; fill: none; }
.fc-ghost { stroke: var(--color-text-light); stroke-width: 1; stroke-dasharray: 3 3; fill: none; opacity: .6; }
.fc-el { font-size: 10px; font-weight: 700; fill: var(--color-surface-light); letter-spacing: .04em; }
.fc-el--dark { fill: var(--color-text-light); }
.fc-dim line { stroke: var(--color-text-muted-light); stroke-width: 1; }
.fc-dim text { font-size: 11px; font-weight: 700; fill: var(--color-text-light); paint-order: stroke; stroke: var(--color-surface-light); stroke-width: 3px; stroke-linejoin: round; }
.fc-dim--on line { stroke: var(--color-accent); stroke-width: 1.5; }
.fc-dim--on text { fill: var(--color-accent); }
.fc-view-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; fill: var(--color-text-muted-light); }

/* Results card and the phone order bar. */
.fc-results { background: var(--color-surface-light); border: 1px solid var(--color-border-light); border-radius: var(--radius-md);
  padding: var(--space-5); }
.fc-order-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; opacity: .7; margin: 0 0 var(--space-3); }
/* Three equal order tiles: the base slab, the walls and the whole pit are separate pours. */
.fc-orders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0 0 var(--space-4); }
.fc-ord { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); background: var(--color-bg-light);
  border: 1px solid var(--color-border-light); border-radius: var(--radius-md); min-width: 0; }
.fc-ord-l { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .8; white-space: nowrap; }
.fc-ord-v { font-size: var(--text-xl); font-weight: 800; line-height: 1.05; }
.fc-ord-v small { font-size: var(--text-sm); font-weight: 700; opacity: .7; }
.fc-ord-n { font-size: var(--text-xs); opacity: .65; }
/* Section view: sandbags against a stormwater wall, formwork against a sewer wall. */
.fc-bag { fill: var(--color-bg-light); stroke: var(--color-text-light); stroke-width: .8; opacity: .9; }
.fc-form { fill: var(--color-surface-light); stroke: var(--color-text-light); stroke-width: 1; }
.fc-breakdown { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.fc-breakdown td { padding: var(--space-2) 0; border-top: 1px solid var(--color-border-light); }
.fc-breakdown td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }
.fc-breakdown tr.fc-total td { font-weight: 800; }
.fc-sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: var(--space-2); vertical-align: -1px;
  border: 1px solid var(--color-text-light); }
.fc-sw--base { background: var(--color-text-muted-light); }
.fc-sw--wall { background: var(--color-text-faint-light); }
.fc-orderbar { display: none; }
@media (max-width: 899px) {
  .fc-orderbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: var(--space-2) clamp(var(--space-4), 4vw, var(--space-12)) var(--space-3);
    background: var(--color-bg); color: var(--color-text); border-top: 3px solid var(--color-accent); }
  .fc-ob { display: flex; flex-direction: column; min-width: 0; }
  .fc-ob + .fc-ob { border-left: 1px solid var(--color-border-dark); padding-left: var(--space-3); }
  .fc-ob-l { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-muted); }
  .fc-ob-v { font-size: var(--text-xl); font-weight: 800; line-height: 1.1; white-space: nowrap; }
  .fc-ob-v small { font-size: var(--text-xs); font-weight: 700; opacity: .7; }
  .fc-page-pad { padding-bottom: 96px; }
}