/* Functional modes reuse the supplied classic hardware vocabulary. */
:root {
  --hardware-bezel-padding:6px;
  --hardware-focus-width:2px;
  --hardware-editor-duration:120ms;
  --hardware-latched-shadow:inset 0 0 10px 2px rgba(107,66,66,.8),inset 1px 2px 4px 4px rgba(0,0,0,.5);
}
.test-card { overflow: hidden; }
.machine-header { width:84%; margin:10px auto 4px; color:var(--text-color); display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.72rem; flex:0 0 auto; }
.machine-header strong { font-size:.86rem; }
.mode-tag { opacity:.75; }
.machine-content { flex:1; min-height:0; overflow:auto; padding-bottom:8px; scrollbar-width:thin; }
.question-chassis { width:84%; margin:6px auto; padding:6px; background:var(--bezel-bg); box-shadow:0 0 6px #000; border-radius:6px; flex:0 0 auto; }
.question-window { background:var(--window-bg); color:var(--system-color); box-shadow:inset -3px 3px 3px 2px #333,inset 0 -2px 12px #333; border-radius:4px; padding:12px; min-height:76px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:clamp(.75rem,2.6vw,.95rem); line-height:1.55; }
.question-window.is-error { color:#ffbf9e; }
#jane-machine[data-screen="results"] #jane-question { white-space:pre-line; }
.card-row { min-height:72px; }
.field-label { width:84%; margin:8px auto 2px; text-align:left; font-size:.65rem; color:var(--text-color); }
.field-label:empty { display:none; }
.cycle-readouts { display:flex; align-items:stretch; gap:8px; width:100%; height:auto; min-height:calc(clamp(48px,7.3dvh,66px) - 12px); }
.cycle-value { flex:1; flex-direction:column; gap:3px; }
.cycle-value span { font-size:.65rem; }
.cycle-of { color:var(--text-color); font-size:.8rem; }
.calculator-machine .machine-content { display:flex; flex-direction:column; justify-content:space-evenly; }
.calculator-machine .card-row { flex-shrink:0; min-height:64px; }
.calculator-machine .windowContainer { height:auto;min-height:0; }
.calculator-machine .windowContainer > .displayWindow { min-height:calc(clamp(48px,7.3dvh,66px) - 12px); }
.calculator-machine .field-trigger { background:var(--system-color);color:var(--window-bg);box-shadow:inset -1px 2px 2px 2px #333,inset 0 -2px 12px #333; }
.windowContainer { margin:4px auto; flex-direction:column; height:auto; min-height:0; padding:6px; }
.windowContainer > .displayWindow { height:auto; min-height:calc(var(--jane-control-height) - 12px); flex:0 0 auto; }
.field-trigger { border:0; font-family:inherit; cursor:pointer; padding:6px 10px; font-size:clamp(.85rem,3.3vw,1.2rem); }
.field-trigger:disabled { cursor:default; }
.field-trigger:focus-visible,.choice:focus-visible { outline:2px solid var(--click-color); outline-offset:-3px; }
.field-value { white-space:normal; overflow-wrap:anywhere; }
.water-readout { flex-direction:column; gap:3px; }
.window-label { font-size:.6rem; line-height:1.1; }
.windowContainer.editor-active { height:auto; min-height:0; max-height:none; }
.editor-surface { overflow:auto; min-height:48px; max-height:270px; width:100%; background:var(--window-bg); color:var(--system-color); border-radius:4px; box-shadow:inset -3px 3px 5px #333; }
.choice { display:block; width:100%; min-height:48px; font:inherit; font-size:.86rem; padding:12px; background:transparent; border:0; border-bottom:1px solid #777; color:var(--system-color); cursor:pointer; }
.choice.is-selected { background:var(--system-color); color:#333; box-shadow:inset 2px 2px 5px #444; transform:none; }
.control-bank-state { display:contents; }
.editor-fields { display:flex; flex-direction:column; gap:10px; padding:10px; }
.editor-fields label { font-size:.7rem; text-align:left; }
.editor-fields input { display:block; width:100%; min-height:48px; font:inherit; font-size:1rem; border:0; border-radius:3px; background:var(--system-color); color:#333; text-align:center; padding:6px; margin-top:4px; }
.inline-choices { display:flex; flex-wrap:wrap; margin-top:5px; }
.inline-choices .choice { flex:1; min-width:70px; border:1px solid #777; }
.phase-field .menuContainer { width:100%; margin:4px 0 0; }
.phase-field .field-label { width:100%; margin:0; }
.hardware-phase-button[aria-checked="true"],.hardware-radio-button[aria-checked="true"] { background:var(--system-color); color:#333; font-weight:bold; transform:translateY(2px); box-shadow:var(--hardware-latched-shadow); }
.reservoir-editor { display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; width:100%; }
.reservoir-editor input { flex:1 1 8ch; min-width:0; width:0; min-height:48px; border:0; border-radius:4px; background:var(--system-color); color:var(--window-bg); font:inherit; font-size:1rem; text-align:center; padding:6px; box-shadow:inset -1px 2px 2px 2px #333,inset 0 -2px 12px #333; }
.reservoir-units { display:flex; flex:1 0 88px; min-width:88px; }
.reservoir-units .menu-button { flex:1; min-width:44px; min-height:44px; }
.menuContainer { margin:8px auto 12px; flex-shrink:0; min-height:0; height:auto; padding:6px; font-size:1rem; }
.menu-button { font-size:.84rem; min-height:44px; }
.menu-button[disabled] { opacity:1;cursor:default; }
.menu-button.is-home { opacity:1; }
.resultsContainer { height:auto; min-height:0; padding:6px; margin:8px auto; }
.resultWindow { min-height:250px; overflow:visible; height:auto; align-items:stretch; }
.nutrient-row { padding:8px 3px; gap:12px; font-size:clamp(.78rem,2.9vw,1rem); border-bottom:1px solid rgba(255,255,255,.12); }
.nutrientName { width:auto; flex:1; text-align:left; margin:0; }
.nutrientAmount { width:auto; flex:0 0 auto; max-width:42%; text-align:right; }
.mix-item { border:0; border-bottom:1px solid #777; background:transparent; color:inherit; font-family:inherit; cursor:pointer; text-align:left; }
.mix-item.is-added { opacity:.32; }
.ph-block { margin-top:10px; text-align:left; font-size:.76rem; line-height:1.55; padding:8px 3px; }
.ph-block:has(.ph-dose) { margin-top:0; padding:0; }
.results-instruction { text-align:center; line-height:normal; }
.ph-instruction { margin-top:10px; }
.note { width:84%; margin:10px auto; font-size:.7rem; line-height:1.6; color:var(--text-color); }
.gardenContainer { min-height:0; height:auto; padding:6px; margin:12px auto; }
.gardenWindow { height:auto; min-height:88px; font-family:inherit; border:0; padding:10px; font-size:.85rem; flex-direction:column; gap:8px; }
.gardenWindow.is-due { border:2px solid var(--click-color); }
.status-actions { width:84%; margin:8px auto; display:flex; gap:6px; flex-wrap:wrap; }
.status-actions .hardware-button { flex:1; padding:12px 6px; background:var(--card-bg); color:var(--text-color); border:1px solid #888; border-radius:4px; font-family:inherit; box-shadow:0 -2px 4px var(--shadow-color2); font-size:.7rem; }
.status-actions .hardware-button:active { background:var(--system-color); color:#333; box-shadow:inset 2px 2px 5px #333; }
.dev-notice { color:var(--text-color); font-size:.65rem; text-align:center; margin:4px; }
@media(max-width:420px) { .question-chassis{width:88%;} .card-row{min-height:67px;} .question-window{min-height:70px;} .menu-button{font-size:.72rem;} .machine-header{font-size:.6rem;} }
@media(max-width:350px) { .question-chassis{width:92%;} }
@media(max-height:650px) { .question-window{min-height:56px;padding:8px;} .card-row{min-height:58px;} .machine-header{margin-top:5px;} }

/* Every page sizes its bezel from the window inside it. */
.question-chassis,
.windowContainer,
.gardenContainer,
.resultsContainer,
.menuContainer { padding:var(--hardware-bezel-padding); height:auto; min-height:0; gap:0; }
.cycle-readouts > .displayWindow { height:auto; }

/* Existing hardware responds without moving hit targets or delaying input. */
.choice:active:not(:disabled),.field-trigger:active:not(:disabled) {
  box-shadow:inset 2px 2px 5px #444;
}
.editor-fields input:focus-visible,.reservoir-editor input:focus-visible {
  outline:var(--hardware-focus-width) solid var(--click-color);
  outline-offset:-3px;
}
@keyframes hardware-window-settle {
  from { opacity:.88; }
  to { opacity:1; }
}
@media (prefers-reduced-motion: no-preference) {
  .editor-active > .editor-surface,
  .editor-active > .reservoir-editor,
  .window-settling > .displayWindow {
    animation:hardware-window-settle var(--hardware-editor-duration) ease-out;
  }
}

/* Readability refinement: retain Orbitron and the existing hardware surfaces. */
.field-label,.window-label,.cycle-value span,.editor-fields label {
  font-size:.75rem;
  line-height:1.45;
}
.field-label,.editor-fields label { font-weight:700; }
.question-window { font-size:clamp(.82rem,2.8vw,.95rem); line-height:1.6; }
.note,.ph-block { font-size:.82rem; line-height:1.65; }
.results-instruction { font-size:.82rem; line-height:1.6; }
.nutrient-row { font-size:clamp(.86rem,3vw,1rem); line-height:1.55; }
.nutrientName { overflow-wrap:anywhere; }
.nutrientAmount { font-weight:700; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.mode-tag { opacity:1; }
.machine-header { font-size:.72rem; }
.menu-button { font-size:clamp(.78rem,3vw,.84rem); }
.window-label,.cycle-value span { opacity:1; }

/* Phone-first readability: keep lighting at the recessed window edges. */
.question-window,.resultWindow,.editor-surface {
  text-shadow:none;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.48),inset 0 -2px 4px rgba(0,0,0,.28);
}
.question-window.is-error { color:#ffe2d5; font-weight:700; }
.nutrientName { min-width:0; }
.nutrientAmount { min-width:0; }
.nutrient-row { align-items:center; column-gap:14px; }
.menu-button { white-space:normal; overflow-wrap:anywhere; padding:4px 3px; }
.machine-header { flex-wrap:wrap; }
.question-window,.field-value,.gardenWindow { overflow-wrap:anywhere; }
@media(max-width:480px) {
  .calculator-machine .windowContainer > .displayWindow { min-height:max(44px,calc(clamp(48px,7.3dvh,66px) - 12px)); }
  .free-unit-kind { font-size:.65rem; opacity:1; }
  .status-actions .hardware-button { font-size:.75rem; min-height:44px; }
  .nutrientAmount { max-width:46%; }
}
/* Home-screen invitation remains outside the garden's editing flow. */
.install-invitation{box-sizing:border-box;position:fixed;z-index:1000;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:calc(100% - 24px);max-width:480px;padding:14px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:#252525;color:#fff;border:1px solid #82e7df;border-radius:12px;box-shadow:0 4px 24px #0008;font:14px/1.4 Arial,sans-serif}
.install-invitation img{object-fit:contain;flex:none}
.install-invitation>div{flex:1;min-width:160px}
.install-invitation p{margin:5px 0 0}
.install-invitation button{font:inherit;cursor:pointer;padding:10px 14px;min-height:44px;border-radius:6px;border:1px solid #82e7df;background:#333;color:#fff}
.install-invitation button:focus-visible{outline:3px solid #fff;outline-offset:3px}