@jjlmoya/utils-diy 1.26.0 → 1.28.0

package/src/tool/excavationVolumeCalculator/component.astro

@@ -0,0 +1,80 @@
+---
+import './excavation-volume-calculator.css';
+import type { ExcavationCalculatorUI } from './ui';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as ExcavationCalculatorUI;
+---
+
+<div class="ev-root" data-ev-root data-ev-ui={JSON.stringify(t)}>
+  <div class="ev-board">
+    <div class="ev-intro">
+      <div class="ev-intro-mark" aria-hidden="true">∿</div>
+      <p>{t.onboarding}</p>
+    </div>
+
+    <section class="ev-scene-panel" aria-labelledby="ev-scene-title">
+      <div class="ev-result-heading"><span class="ev-kicker" id="ev-scene-title">{t.sceneTitle}</span><span class="ev-status" data-ev-status>{t.soilStatusLabel}: {t.soilStatusMedium}</span></div>
+      <div class="ev-scene" data-ev-scene></div>
+      <div class="ev-metrics">
+        <div class="ev-metric ev-metric-main"><span class="ev-metric-label">{t.bankVolumeLabel}</span><strong class="ev-metric-value"><span data-ev-bank>9.98</span> <span class="ev-unit-suffix" data-ev-volume-unit>m³</span></strong><span class="ev-metric-help">{t.bankVolumeHelp}</span></div>
+        <div class="ev-metric"><span class="ev-metric-label">{t.looseVolumeLabel}</span><strong class="ev-metric-value"><span data-ev-loose-low>11.48</span> to <span data-ev-loose-high>12.47</span> <span class="ev-unit-suffix" data-ev-volume-unit>m³</span></strong><span class="ev-metric-help">{t.looseVolumeHelp}</span></div>
+      </div>
+      <div class="ev-expansion"><span>{t.expansionLabel}</span><strong data-ev-expansion>15 to 25%</strong></div>
+    </section>
+
+    <div class="ev-workbench">
+      <section class="ev-control-panel" aria-labelledby="ev-dimensions-title">
+        <div class="ev-control-heading">
+          <span class="ev-kicker" id="ev-dimensions-title">{t.dimensionLabel}</span>
+          <div class="ev-segmented" role="group" aria-label={t.unitSystemLabel}>
+            <button type="button" class="ev-active" data-ev-unit="metric">{t.unitMetric}</button>
+            <button type="button" data-ev-unit="imperial">{t.unitImperial}</button>
+          </div>
+        </div>
+
+        <fieldset class="ev-fieldset">
+          <legend>{t.dimensionLabel}</legend>
+          <div class="ev-dimensions">
+            <div class="ev-field">
+              <label for="ev-length">{t.lengthLabel}</label>
+              <div class="ev-input"><input id="ev-length" data-ev-dimension="length" type="number" min="0" step="0.01" value="4.8" inputmode="decimal" /><span class="ev-unit" data-ev-unit-label>m</span></div>
+            </div>
+            <div class="ev-field">
+              <label for="ev-width">{t.widthLabel}</label>
+              <div class="ev-input"><input id="ev-width" data-ev-dimension="width" type="number" min="0" step="0.01" value="3.2" inputmode="decimal" /><span class="ev-unit" data-ev-unit-label>m</span></div>
+            </div>
+            <div class="ev-field">
+              <label for="ev-depth">{t.depthLabel}</label>
+              <div class="ev-input"><input id="ev-depth" data-ev-dimension="depth" type="number" min="0" step="0.01" value="0.65" inputmode="decimal" /><span class="ev-unit" data-ev-unit-label>m</span></div>
+            </div>
+          </div>
+        </fieldset>
+
+        <fieldset class="ev-fieldset ev-soil-fieldset">
+          <legend>{t.soilLabel}</legend>
+          <div class="ev-soil-grid">
+            <button type="button" class="ev-soil-button" data-ev-soil="sand"><span class="ev-soil-name">{t.soilSand}</span><span class="ev-soil-band">{t.soilSandBand}</span></button>
+            <button type="button" class="ev-soil-button ev-active" data-ev-soil="topsoil"><span class="ev-soil-name">{t.soilTopsoil}</span><span class="ev-soil-band">{t.soilTopsoilBand}</span></button>
+            <button type="button" class="ev-soil-button" data-ev-soil="clay"><span class="ev-soil-name">{t.soilClay}</span><span class="ev-soil-band">{t.soilClayBand}</span></button>
+            <button type="button" class="ev-soil-button" data-ev-soil="gravel"><span class="ev-soil-name">{t.soilGravel}</span><span class="ev-soil-band">{t.soilGravelBand}</span></button>
+          </div>
+        </fieldset>
+      </section>
+    </div>
+    <div class="ev-notes"><p class="ev-interpretation"><strong>{t.interpretationTitle}</strong> {t.interpretationText}</p><p class="ev-warning">{t.warning}</p></div>
+  </div>
+</div>
+
+<script>
+  import { mountExcavationCalculator } from './controller';
+  import type { ExcavationCalculatorUI } from './ui';
+
+  const root = document.querySelector('[data-ev-root]');
+  const ui = JSON.parse(root?.getAttribute('data-ev-ui') || '{}') as ExcavationCalculatorUI;
+  if (root) mountExcavationCalculator(root, ui);
+</script>

package/src/tool/excavationVolumeCalculator/controller.ts

@@ -0,0 +1,69 @@
+import { calculateExcavation, convertDimension } from './logic';
+import { renderResults } from './dom-views';
+import { readExcavationState, writeExcavationState } from './storage';
+import type { ExcavationCalculatorUI, ExcavationInput, ExcavationUnitSystem, SoilProfile } from './ui';
+
+const initialState: ExcavationInput = { unitSystem: 'metric', length: 4.8, width: 3.2, depth: 0.65, soil: 'topsoil' };
+
+export function mountExcavationCalculator(root: Element, ui: ExcavationCalculatorUI): void {
+  const state = readExcavationState(initialState);
+  setControls(root, state);
+  bindUnitButtons(root, state, ui);
+  bindDimensionInputs(root, state, ui);
+  bindSoilButtons(root, state, ui);
+  render(root, state, ui);
+}
+
+function bindUnitButtons(root: Element, state: ExcavationInput, ui: ExcavationCalculatorUI): void {
+  root.querySelectorAll('[data-ev-unit]').forEach((button) => button.addEventListener('click', () => {
+    const next = (button as HTMLElement).dataset.evUnit as ExcavationUnitSystem;
+    if (next === state.unitSystem) return;
+    ['length', 'width', 'depth'].forEach((key) => {
+      const value = state[key as keyof ExcavationInput] as number;
+      state[key as 'length' | 'width' | 'depth'] = convertDimension(value, state.unitSystem, next);
+    });
+    state.unitSystem = next;
+    setControls(root, state);
+    render(root, state, ui);
+  }));
+}
+
+function bindDimensionInputs(root: Element, state: ExcavationInput, ui: ExcavationCalculatorUI): void {
+  root.querySelectorAll<HTMLInputElement>('[data-ev-dimension]').forEach((input) => input.addEventListener('input', () => {
+    const key = input.dataset.evDimension as 'length' | 'width' | 'depth';
+    state[key] = Number(input.value) || 0;
+    render(root, state, ui);
+  }));
+}
+
+function bindSoilButtons(root: Element, state: ExcavationInput, ui: ExcavationCalculatorUI): void {
+  root.querySelectorAll('[data-ev-soil]').forEach((button) => button.addEventListener('click', () => {
+    state.soil = (button as HTMLElement).dataset.evSoil as SoilProfile;
+    setControls(root, state);
+    render(root, state, ui);
+  }));
+}
+
+
+function setControls(root: Element, state: ExcavationInput): void {
+  root.querySelectorAll('[data-ev-unit]').forEach((button) => button.classList.toggle('ev-active', (button as HTMLElement).dataset.evUnit === state.unitSystem));
+  root.querySelectorAll<HTMLInputElement>('[data-ev-dimension]').forEach((input) => {
+    const key = input.dataset.evDimension as 'length' | 'width' | 'depth';
+    input.value = String(roundInput(state[key]));
+  });
+  root.querySelectorAll('[data-ev-soil]').forEach((button) => button.classList.toggle('ev-active', (button as HTMLElement).dataset.evSoil === state.soil));
+  root.querySelectorAll('[data-ev-unit-label]').forEach((element) => { element.textContent = state.unitSystem === 'metric' ? 'm' : 'ft'; });
+  root.querySelectorAll('[data-ev-volume-unit]').forEach((element) => { element.textContent = state.unitSystem === 'metric' ? 'm³' : 'ft³'; });
+}
+
+function render(root: Element, state: ExcavationInput, ui: ExcavationCalculatorUI): void {
+  const output = calculateExcavation(state);
+  const system = state.unitSystem;
+  renderResults(root, output, state.soil, ui);
+  writeExcavationState(state);
+  root.dataset.evSystem = system;
+}
+
+function roundInput(value: number): number {
+  return Math.round(value * 100) / 100;
+}

package/src/tool/excavationVolumeCalculator/dom-views.ts

@@ -0,0 +1,63 @@
+import type { ExcavationOutput, ExcavationCalculatorUI, SoilProfile } from './ui';
+import { evaluateExcavation } from './evaluator';
+
+const soilColors: Record<SoilProfile, string> = { sand: '#e6b86a', topsoil: '#86603b', clay: '#b8644b', gravel: '#8b9290' };
+
+export function formatVolume(value: number): string {
+  return value.toLocaleString('en-US', { maximumFractionDigits: 2, minimumFractionDigits: 2 });
+}
+
+export function renderExcavationScene(root: Element, output: ExcavationOutput, soil: SoilProfile, ui: ExcavationCalculatorUI): void {
+  const scene = root.querySelector('[data-ev-scene]');
+  if (!scene) return;
+  const color = soilColors[soil];
+  const expansionWidth = Math.min(190, Math.max(40, output.looseHigh / Math.max(output.bankVolume, 0.01) * 105));
+  scene.innerHTML = `<svg class="ev-scene-svg" viewBox="0 0 640 320" role="img" aria-label="${ui.sceneTitle}">
+    <rect class="ev-sky" x="0" y="0" width="640" height="300" rx="20" />
+    <path class="ev-contour" d="M32 62 C126 22 205 75 293 45 S470 24 610 62 M42 83 C130 48 203 96 304 68 S477 49 600 85" />
+    <path class="ev-ground" d="M0 112 C120 102 190 119 290 108 C410 96 520 120 640 108 V300 H0Z" />
+    <path class="ev-strata" d="M0 160 C120 150 190 168 290 156 C410 144 520 167 640 156 M0 212 C120 202 190 220 290 208 C410 196 520 219 640 208" />
+    <path class="ev-cut" d="M150 112 V235 H405 V112" fill="${color}" />
+    <path class="ev-cut-line" d="M150 112 V235 H405 V112" />
+    <path class="ev-bank-fill" d="M178 142 H377 V214 H178Z" />
+    <path class="ev-loose-fill" d="M455 244 Q474 207 494 224 Q518 177 542 222 Q570 194 594 225 Q610 211 ${455 + expansionWidth} 244Z" />
+    <path class="ev-arrow" d="M420 178 C445 178 445 178 468 178 M458 168 L468 178 L458 188" />
+    <path class="ev-measure" d="M128 112 V235 M122 112 H134 M122 235 H134" />
+    <text class="ev-label ev-label-measure" x="105" y="181">D</text>
+    <text class="ev-label ev-label-bank" x="178" y="132">${ui.sceneBank}</text>
+    <text class="ev-label ev-label-loose" x="455" y="264">${ui.sceneLoose}</text>
+    <text class="ev-label ev-label-cut" x="158" y="286">${ui.sceneCut}</text>
+    <circle class="ev-sun" cx="570" cy="52" r="20" />
+    <path class="ev-grass" d="M0 112 ${grassPath()}" />
+  </svg>`;
+}
+
+function grassPath(): string {
+  return Array.from({ length: 28 }, (_, index) => {
+    const x = index * 24;
+    return `M${x} 112 l4 -10 M${x + 8} 112 l-2 -8`;
+  }).join(' ');
+}
+
+export function renderResults(root: Element, output: ExcavationOutput, soil: SoilProfile, ui: ExcavationCalculatorUI): void {
+  setText(root, '[data-ev-bank]', formatVolume(output.bankVolume));
+  setText(root, '[data-ev-loose-low]', formatVolume(output.looseLow));
+  setText(root, '[data-ev-loose-high]', formatVolume(output.looseHigh));
+  setText(root, '[data-ev-expansion]', `${Math.round(output.expansionLow * 100)}-${Math.round(output.expansionHigh * 100)}%`);
+  const evaluation = evaluateExcavation(output, soil);
+  const badge = root.querySelector('[data-ev-status]');
+  if (badge) {
+    badge.textContent = `${ui.soilStatusLabel}: ${ui[`soilStatus${capitalize(evaluation.status)}` as keyof ExcavationCalculatorUI]}`;
+    badge.setAttribute('data-ev-status-level', evaluation.status);
+  }
+  renderExcavationScene(root, output, soil, ui);
+}
+
+function setText(root: Element, selector: string, value: string): void {
+  const element = root.querySelector(selector);
+  if (element) element.textContent = value;
+}
+
+function capitalize(value: string): string {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}

package/src/tool/excavationVolumeCalculator/entry.ts

@@ -0,0 +1,26 @@
+import type { DiyToolEntry, ToolLocaleContent } from '../../types';
+import type { ExcavationCalculatorUI } from './ui';
+
+export type ExcavationVolumeCalculatorLocaleContent = ToolLocaleContent<ExcavationCalculatorUI>;
+
+export const excavationVolumeCalculator: DiyToolEntry<ExcavationCalculatorUI> = {
+  id: 'excavation-volume-soil-swell-calculator',
+  icons: { bg: 'mdi:land-fields', fg: 'mdi:shovel' },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};

package/src/tool/excavationVolumeCalculator/evaluator.ts

@@ -0,0 +1,21 @@
+import type { ExcavationOutput, SoilProfile } from './ui';
+
+export type ExcavationStatus = 'low' | 'medium' | 'high';
+
+export interface ExcavationEvaluation {
+  status: ExcavationStatus;
+  ratio: number;
+  soil: SoilProfile;
+}
+
+export function evaluateExcavation(output: ExcavationOutput, soil: SoilProfile): ExcavationEvaluation {
+  const ratio = output.expansionHigh;
+  const status = getStatus(ratio);
+  return { status, ratio, soil };
+}
+
+function getStatus(ratio: number): ExcavationStatus {
+  if (ratio > 0.25) return 'high';
+  if (ratio >= 0.15) return 'medium';
+  return 'low';
+}

package/src/tool/excavationVolumeCalculator/excavation-volume-calculator.css

@@ -0,0 +1,442 @@
+:root {
+  --n-ink: #1d2925;
+  --n-muted: #64736b;
+  --n-paper: #f5f1e8;
+  --n-surface: #fffdf8;
+  --n-line: #d8d0c2;
+  --n-accent: #2f7359;
+  --n-accent-soft: #dceadd;
+  --n-sand: #e6b86a;
+  --n-soil: #86603b;
+  --n-warning: #8a5b20;
+}
+
+.theme-dark {
+  --n-ink: #f4f0e8;
+  --n-muted: #b3c0b8;
+  --n-paper: #263630;
+  --n-surface: #31453a;
+  --n-line: #64796c;
+  --n-accent: #9bd0a7;
+  --n-accent-soft: #315340;
+  --n-sand: #d5a855;
+  --n-soil: #b58257;
+  --n-warning: #f0c77b;
+}
+
+.ev-root {
+  max-width: 1120px;
+  margin: 0 auto;
+  color: var(--n-ink);
+  font: 1rem/1.4 Georgia, serif;
+}
+
+.ev-board {
+  overflow: hidden;
+  border: 1px solid var(--n-line);
+  border-radius: 1.4rem;
+  padding: clamp(0.85rem, 2vw, 1.35rem);
+  background: var(--n-paper);
+}
+
+.ev-intro {
+  display: flex;
+  align-items: start;
+  gap: 1rem;
+  margin-bottom: 0.85rem;
+}
+
+.ev-intro-mark {
+  display: grid;
+  flex: 0 0 3rem;
+  place-items: center;
+  height: 3rem;
+  border-radius: 50%;
+  background: var(--n-accent);
+  color: var(--n-paper);
+  font-size: 1.35rem;
+}
+
+.ev-intro p {
+  max-width: 62ch;
+  margin: 0;
+  color: var(--n-muted);
+  line-height: 1.55;
+}
+
+.ev-scene-panel {
+  display: grid;
+  gap: 0.9rem;
+  border-bottom: 1px solid var(--n-line);
+  padding-bottom: 0.95rem;
+}
+
+.ev-kicker {
+  color: var(--n-accent);
+  font: 700 0.72rem/1.2 system-ui, sans-serif;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.ev-result-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.8rem;
+}
+
+.ev-status {
+  border-radius: 999px;
+  padding: 0.38rem 0.6rem;
+  background: var(--n-accent);
+  color: var(--n-paper);
+  font: 700 0.68rem system-ui, sans-serif;
+}
+
+.ev-status[data-ev-status-level="high"] {
+  background: var(--n-warning);
+}
+
+.ev-scene {
+  min-height: 260px;
+  border: 1px solid var(--n-line);
+  border-radius: 0.9rem;
+  background: var(--n-surface);
+}
+
+.ev-scene-svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.ev-sky {
+  fill: var(--n-accent-soft);
+}
+
+.ev-ground {
+  fill: var(--n-soil);
+  opacity: 0.8;
+}
+
+.ev-contour,
+.ev-strata {
+  fill: none;
+  stroke: var(--n-accent);
+  stroke-width: 2;
+  opacity: 0.45;
+}
+
+.ev-strata {
+  stroke: var(--n-sand);
+  stroke-width: 3;
+  opacity: 0.35;
+}
+
+.ev-cut {
+  stroke: var(--n-ink);
+  stroke-width: 2;
+}
+
+.ev-cut-line {
+  fill: none;
+  stroke: var(--n-ink);
+  stroke-dasharray: 5 5;
+  stroke-width: 2;
+}
+
+.ev-bank-fill {
+  fill: var(--n-sand);
+  opacity: 0.9;
+}
+
+.ev-loose-fill {
+  fill: var(--n-sand);
+  stroke: var(--n-ink);
+  stroke-width: 2;
+}
+
+.ev-arrow {
+  fill: none;
+  stroke: var(--n-accent);
+  stroke-width: 3;
+}
+
+.ev-measure {
+  fill: none;
+  stroke: var(--n-ink);
+  stroke-width: 2;
+}
+
+.ev-label {
+  fill: var(--n-ink);
+  font: 700 13px system-ui, sans-serif;
+}
+
+.ev-sun {
+  fill: var(--n-sand);
+}
+
+.ev-grass {
+  fill: none;
+  stroke: var(--n-accent-soft);
+  stroke-width: 3;
+}
+
+.ev-metrics {
+  display: grid;
+  grid-template-columns: 1fr 1.2fr;
+  gap: 0.6rem;
+}
+
+.ev-metric {
+  border: 1px solid var(--n-line);
+  border-radius: 0.75rem;
+  padding: 0.8rem;
+}
+
+.ev-metric-main {
+  border-color: var(--n-accent);
+  background: var(--n-accent);
+  color: var(--n-paper);
+}
+
+.ev-metric-label {
+  display: block;
+  font: 700 0.72rem system-ui, sans-serif;
+}
+
+.ev-metric-value {
+  display: block;
+  overflow: hidden;
+  margin-top: 0.4rem;
+  white-space: nowrap;
+  font: 700 clamp(1.2rem, 3.5vw, 2.2rem)/1 system-ui, sans-serif;
+  text-overflow: ellipsis;
+}
+
+.ev-unit-suffix {
+  font-size: 0.55em;
+  vertical-align: super;
+}
+
+.ev-metric-help {
+  display: block;
+  margin-top: 0.35rem;
+  color: var(--n-muted);
+  font: 0.72rem/1.4 system-ui, sans-serif;
+}
+
+.ev-metric-main .ev-metric-help {
+  color: var(--n-paper);
+  opacity: 0.85;
+}
+
+.ev-expansion {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  border-top: 1px solid var(--n-line);
+  padding-top: 0.75rem;
+  font: 700 0.8rem system-ui, sans-serif;
+}
+
+.ev-expansion strong {
+  color: var(--n-accent);
+}
+
+.ev-workbench {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.25rem;
+  padding-top: 0.95rem;
+}
+
+.ev-control-panel {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  align-content: start;
+  gap: 0.8rem 1.25rem;
+}
+
+.ev-control-heading {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.ev-segmented {
+  display: inline-flex;
+  gap: 0.2rem;
+  border: 1px solid var(--n-line);
+  border-radius: 999px;
+  padding: 0.2rem;
+  background: var(--n-surface);
+}
+
+.ev-segmented button,
+.ev-soil-button {
+  cursor: pointer;
+  border: 1px solid transparent;
+  color: var(--n-muted);
+  background: transparent;
+  font: 700 0.75rem system-ui, sans-serif;
+}
+
+.ev-segmented button {
+  border-radius: 999px;
+  padding: 0.48rem 0.7rem;
+}
+
+.ev-segmented button.ev-active,
+.ev-soil-button.ev-active {
+  background: var(--n-accent);
+  color: var(--n-paper);
+}
+
+.ev-soil-button.ev-active .ev-soil-name,
+.ev-soil-button.ev-active .ev-soil-band {
+  color: var(--n-paper);
+}
+
+.ev-soil-button:hover {
+  border-color: var(--n-accent);
+  color: var(--n-accent);
+}
+
+.ev-fieldset {
+  display: grid;
+  gap: 0.6rem;
+  margin: 0;
+  border: 0;
+  padding: 0;
+}
+
+.ev-fieldset:first-of-type {
+  grid-column: 1;
+}
+
+.ev-soil-fieldset {
+  grid-column: 2;
+}
+
+.ev-fieldset legend,
+.ev-field label {
+  font: 700 0.8rem system-ui, sans-serif;
+}
+
+.ev-dimensions {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.55rem;
+}
+
+.ev-field {
+  display: grid;
+  gap: 0.3rem;
+  color: var(--n-muted);
+}
+
+.ev-input {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--n-line);
+  border-radius: 0.55rem;
+  background: var(--n-surface);
+}
+
+.ev-input input {
+  min-width: 0;
+  width: 100%;
+  border: 0;
+  outline: 0;
+  padding: 0.65rem;
+  color: var(--n-ink);
+  background: transparent;
+  font: 700 1rem system-ui, sans-serif;
+}
+
+.ev-unit {
+  padding-right: 0.65rem;
+  color: var(--n-muted);
+  font: 700 0.72rem system-ui, sans-serif;
+}
+
+.ev-soil-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.45rem;
+}
+
+.ev-soil-button {
+  padding: 0.6rem;
+  border-color: var(--n-line);
+  border-radius: 0.65rem;
+  text-align: left;
+}
+
+.ev-soil-name {
+  display: block;
+  color: var(--n-ink);
+}
+
+.ev-soil-band {
+  display: block;
+  margin-top: 0.2rem;
+  color: var(--n-muted);
+  font: 0.7rem system-ui, sans-serif;
+}
+
+.ev-notes {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.85rem;
+  border-top: 1px solid var(--n-line);
+  padding-top: 0.8rem;
+}
+
+.ev-interpretation,
+.ev-warning {
+  margin: 0;
+  color: var(--n-muted);
+  font: 0.78rem/1.5 system-ui, sans-serif;
+}
+
+.ev-warning {
+  border-left: 3px solid var(--n-warning);
+  padding: 0.65rem 0.75rem;
+  color: var(--n-warning);
+}
+
+button:focus-visible,
+input:focus-visible {
+  outline: 3px solid var(--n-sand);
+  outline-offset: 2px;
+}
+
+@media (max-width: 820px) {
+  .ev-control-panel,
+  .ev-notes {
+    grid-template-columns: 1fr;
+  }
+
+  .ev-control-heading,
+  .ev-fieldset:first-of-type,
+  .ev-soil-fieldset {
+    grid-column: 1;
+  }
+}
+
+@media (max-width: 480px) {
+  .ev-control-heading {
+    align-items: start;
+    flex-direction: column;
+  }
+
+  .ev-dimensions,
+  .ev-metrics {
+    grid-template-columns: 1fr;
+  }
+}