/* v0.15 presentation layer; calculations, field identities and storage stay shared. */
:root { --jane-accent:#89ed58; --jane-surface:#f2f5f0; --jane-panel:#fff; --jane-line:#c5cec4; --jane-muted:#526050; }
body.dark-mode { --jane-surface:#111617; --jane-panel:#1c2324; --jane-line:#364142; --jane-muted:#adb6b5; --bg-color:#101415; --card-bg:#161c1d; --text-color:#f1f5f2; --bezel-bg:#202729; --system-color:#a4ef78; --window-bg:#1b2223; --click-color:#9bf16b; }
body { font-family:Arial,Helvetica,sans-serif; background:var(--bg-color); }
.test-bezel { width:min(100vw,540px); height:100dvh; max-height:1100px; border-radius:28px; padding:1px; background:var(--jane-line); box-shadow:0 20px 80px #0008; }
.test-card { border-radius:27px; padding:16px 0 max(12px,env(safe-area-inset-bottom)); background:radial-gradient(ellipse at 30% 0%,#93b8a10b,transparent 55%),var(--card-bg); box-shadow:none; }
.machine-header { width:90%; margin:5px auto 18px; align-items:center; }
.jane-brand { display:flex; flex-direction:column; font-family:Orbitron,sans-serif; text-align:left; }
.machine-header .jane-brand { font-size:2rem; line-height:1.05; letter-spacing:.12em; }
.jane-brand small { font:500 .55rem/1.7 Orbitron,sans-serif; letter-spacing:.38em; padding-left:2px; }
.mode-tag { font:600 .68rem/1.4 Arial,sans-serif; color:var(--jane-muted); border:1px solid var(--jane-line); border-radius:30px; padding:7px 10px; }
.question-chassis,.windowContainer,.gardenContainer,.resultsContainer { width:90%; background:transparent; box-shadow:none; border-radius:18px; padding:0; }
.question-chassis { margin:0 auto 12px; }
.question-window { min-height:60px; background:var(--jane-panel); color:var(--text-color); border:1px solid var(--jane-line); border-radius:16px; box-shadow:none; padding:12px 16px; font:400 .95rem/1.5 Arial,sans-serif; text-align:left; align-items:flex-start; }
.question-window.is-error { color:#ffad92; }
body:not(.dark-mode) .question-window.is-error { color:#821c12; }
.machine-content { padding-bottom:16px; }
.field-label { width:90%; margin:16px auto 7px; font:700 .65rem/1.5 Arial,sans-serif; letter-spacing:.13em; color:var(--jane-muted); }
.card-row { min-height:0; }
.windowContainer { margin:0 auto 10px; }
.displayWindow,.gardenWindow,.calculator-machine .field-trigger { background:linear-gradient(145deg,#ffffff05,transparent),var(--jane-panel); color:var(--text-color); border:1px solid var(--jane-line); border-radius:16px; box-shadow:0 3px 8px #0001; }
.field-trigger { font:500 1rem/1.4 Arial,sans-serif; min-height:56px; padding:14px 16px; text-align:left; justify-content:space-between; }
.windowContainer > .displayWindow { min-height:56px; }
.water-readout .field-value { font:600 1.65rem/1.4 Orbitron,sans-serif; }
.cycle-value strong { font:600 1.8rem/1.2 Orbitron,sans-serif; }
.cycle-value span { font:400 .75rem/1.3 Arial,sans-serif; }
.cycle-of { color:var(--jane-muted); }
.calculator-machine .machine-content { justify-content:flex-start; gap:5px; }
.calculator-machine .card-row { min-height:0; }
.calculator-machine .windowContainer > .displayWindow { min-height:56px; }
.phase-selector { gap:8px; }
.menuContainer { width:90%; padding:0; margin:6px auto 10px; background:transparent; box-shadow:none; border:0; }
.menu-button,.status-actions .hardware-button { min-height:48px; border:1px solid var(--jane-line); border-radius:12px; background:var(--jane-panel); color:var(--text-color); box-shadow:none; font:600 .8rem/1.3 Arial,sans-serif; padding:10px 8px; }
.menu-button.is-home { font-family:Orbitron,sans-serif; letter-spacing:.08em; }
.menu-button:disabled { opacity:.45; }
.menu-button[data-action="results"],.menu-button[data-action="mix"],.menu-button[data-action="editor-accept"] { background:linear-gradient(#a3f77b,#7fda48); border-color:#b8ff94; color:#12200d; box-shadow:0 2px 16px #8ceb641f,inset 0 1px 0 #e7ffcc; }
.hardware-phase-button[aria-checked="true"],.hardware-radio-button[aria-checked="true"] { color:#14220e; background:var(--jane-accent); box-shadow:none; transform:none; }
.gardenWindow { padding:20px; gap:8px; font:400 .9rem/1.5 Arial,sans-serif; }
.gardenWindow strong { font-size:1.12rem; }
.gardenWindow span { color:var(--jane-muted); }
.gardenWindow.is-due { border-color:var(--jane-accent); }
.resultWindow { min-height:0; padding:0; background:transparent; color:var(--text-color); box-shadow:none; border:0; }
.nutrient-row { width:100%; border:1px solid var(--jane-line); border-radius:15px; margin-top:9px; padding:12px; background:var(--jane-panel); gap:12px; font:500 1rem/1.4 Arial,sans-serif; }
.nutrient-bottle { width:35px; height:49px; flex:0 0 35px; filter:drop-shadow(0 2px 4px #0005); }
.nutrientName { min-width:0; }
.nutrientAmount { font:600 clamp(1rem,4.4vw,1.4rem)/1.5 Orbitron,sans-serif; max-width:43%; }
.mix-item.is-added { opacity:.45; }
.ph-block,.results-instruction,.note { color:var(--jane-muted); font-family:Arial,sans-serif; }
.results-instruction { font-size:.85rem; }
.ph-dose { border-color:var(--jane-line); }
.editor-surface,.reservoir-editor input,.editor-fields input { background:var(--jane-panel); color:var(--text-color); border-radius:14px; box-shadow:none; font-family:Arial,sans-serif; }
.editor-surface { border:1px solid var(--jane-line); }
.choice { color:var(--text-color); border-color:var(--jane-line); font:500 1rem/1.4 Arial,sans-serif; }
.choice.is-selected { color:#13200e; background:var(--jane-accent); box-shadow:none; }
.choice:hover:not(.is-selected) { background:#8ceb6412; }
.editor-fields label { font:600 .85rem/1.5 Arial,sans-serif; }
.editor-fields input { border:1px solid var(--jane-line); }
.status-actions { width:90%; }
button:focus-visible,input:focus-visible { outline:3px solid var(--click-color); outline-offset:2px; }
@media(max-width:560px) { .test-bezel,.test-card { border-radius:0; } .test-bezel { width:100%; padding:0; box-shadow:none; } }
@media(max-width:350px) { .machine-header .jane-brand { font-size:1.6rem; } .nutrient-row { padding:10px; gap:8px; } .nutrient-bottle { width:26px; flex-basis:26px; } .nutrientAmount { font-size:1rem; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }

/* The approved concept's composition and material depth. */
body.dark-mode { --card-bg:#101516; --jane-panel:#1a2022; --jane-line:#ffffff20; --jane-muted:#abb2b5; }
.test-card { background:radial-gradient(ellipse at 12% -5%,#b5c9c41d,transparent 46%),radial-gradient(ellipse at 95% 45%,#0005,transparent 65%),#111617; }
body:not(.dark-mode) .test-card { background:linear-gradient(135deg,#fff8,transparent),var(--card-bg); }
.test-card * { text-shadow:none; }
.machine-header { flex-direction:column; justify-content:center; margin:8px auto 16px; gap:8px; }
.machine-header .jane-brand { text-align:center; font-size:clamp(2.7rem,9vw,3.5rem); letter-spacing:.16em; font-weight:600; color:var(--text-color); text-shadow:0 1px 0 #fff4,0 4px 18px #0005; }
.jane-brand small { font-size:.64rem; letter-spacing:.55em; margin-top:3px; padding-left:6px; color:var(--jane-muted); }
.mode-tag { padding:3px 8px; border:0; font-size:.6rem; letter-spacing:.09em; opacity:.7; }
.displayWindow,.gardenWindow,.question-window,.formula-card,.mix-volume,.resultsContainer {
  background:linear-gradient(130deg,#ffffff09 0%,#ffffff02 45%,#00000016 100%),var(--jane-panel);
  border:1px solid var(--jane-line);
  box-shadow:inset 0 1px 0 #ffffff0a,inset 0 -1px 0 #0004,0 8px 20px #0002;
}
.question-window { border-radius:20px; }
#jane-machine[data-screen="garden"] #screen-content>.field-label:has(+[data-field="identity"]),
#jane-machine[data-screen="garden"] #screen-content>.field-label:has(+[data-field="cycle"]) { position:absolute; width:1px; height:1px; margin:0; clip-path:inset(50%); overflow:hidden; }
[data-field="identity"] .field-trigger { font-size:1.1rem; font-weight:600; }
[data-field="identity"] .field-trigger::before { content:''; width:19px; height:19px; border:2px solid #8aee61; border-radius:5px; flex:none; transform:rotate(-6deg); margin-right:12px; }
[data-field="identity"] .field-trigger::after,[data-field="nutrientPlan"] .field-trigger::after { content:'›'; font-size:1.6rem; font-weight:400; color:var(--jane-muted); margin-left:10px; }
.mix-volume { width:90%; margin:0 auto 15px; border-radius:23px; padding:15px 10px 10px; }
.section-eyebrow { padding:0 7px; text-align:left; color:var(--jane-muted); font:700 .68rem/1.4 Arial,sans-serif; letter-spacing:.17em; }
.mix-day { text-align:left; padding-bottom:3px; }
.mix-day time { display:block; padding:5px 7px 0; color:var(--jane-accent); font:600 1rem/1.4 Arial,sans-serif; }
.mix-volume .field-label { font-size:.75rem; letter-spacing:0; text-transform:none; margin-top:12px; }
.volume-control.windowContainer { display:grid; grid-template-columns:48px minmax(0,1fr) 48px; align-items:center; gap:6px; padding:9px; border-radius:20px; border:1px solid var(--jane-line); background:linear-gradient(130deg,#ffffff08,#0002); box-shadow:inset 0 1px 0 #fff1,0 5px 15px #0002; }
.volume-control > .reservoir-editor { grid-column:1 / -1; min-width:0; }
.mix-volume .volume-control { width:100%; margin-bottom:0; }
.volume-control .displayWindow { width:100%; min-height:85px; padding:0; box-shadow:none; background:none; border:0; overflow:hidden; }
.volume-control .displayWindow { align-items:center; justify-content:center; }
.volume-control .field-value { width:100%; white-space:normal; text-align:center; }
.volume-number { font:600 clamp(2.6rem,12vw,4rem)/1.3 Orbitron,sans-serif; letter-spacing:-.04em; }
.volume-unit { font:400 .85rem/1.3 Arial,sans-serif; color:var(--jane-muted); white-space:nowrap; }
.volume-step { display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; color:var(--jane-accent); font:400 2rem/1 Arial,sans-serif; border:1px solid #ffffff29; background:linear-gradient(140deg,#ffffff18,#0003),var(--jane-panel); box-shadow:inset 0 1px 1px #ffffff20,0 4px 9px #0005; cursor:pointer; }
.volume-step:active:not(:disabled) { box-shadow:inset 0 2px 5px #0008; transform:translateY(1px); }
.volume-step:disabled { opacity:.35; cursor:default; }
.formula-card { width:90%; margin:0 auto 15px; padding:17px 12px 8px; border-radius:23px; }
.formula-title { display:flex; gap:10px; align-items:center; margin:0 0 13px; font:700 1.4rem/1.35 Arial,sans-serif; text-align:left; color:var(--text-color); }
.formula-title::before { content:''; width:19px; height:23px; border:2px solid var(--jane-accent); border-radius:3px 3px 8px 8px; clip-path:polygon(25% 0,75% 0,75% 35%,100% 100%,0 100%,25% 35%); background:linear-gradient(transparent 50%,#8aee6144 50%); }
.formula-card .field-label { display:none; }
.formula-card .windowContainer { width:100%; }
.formula-card [data-field="nutrientPlan"] .displayWindow { min-height:40px; padding:0 0 12px; border:0; background:none; box-shadow:none; color:var(--jane-muted); font-size:.8rem; border-radius:0; }
.formula-card .nutrient-row,.resultsContainer .nutrient-row { margin:0; min-height:84px; padding:10px 7px; gap:10px; border:1px solid #ffffff0b; border-bottom-color:#0004; border-radius:0; background:linear-gradient(110deg,#ffffff06,#0000000a); box-shadow:inset 0 1px 0 #ffffff05; }
.formula-card .nutrient-row:first-child { border-radius:12px 12px 0 0; }
.nutrient-bottle { width:41px; height:63px; flex:0 0 41px; filter:drop-shadow(1px 4px 3px #0008); }
.nutrientName { font:600 .98rem/1.35 Arial,sans-serif; }
.nutrientAmount { font-size:1.6rem; line-height:1.4; max-width:47%; }
.dose-number { font:600 clamp(1.3rem,5.9vw,2.15rem)/1.3 Orbitron,sans-serif; letter-spacing:-.05em; }
.dose-unit { font:400 .83rem/1.4 Arial,sans-serif; color:var(--jane-muted); }
.preview-help { color:var(--jane-muted); font:400 .78rem/1.5 Arial,sans-serif; padding:13px 3px 5px; text-align:left; }
#jane-machine[data-screen="results"] .resultsContainer { padding:17px 12px 12px; border-radius:23px; }
#jane-machine[data-screen="results"] .resultsContainer .results-instruction { text-align:left; font-size:.8rem; margin-bottom:12px; }
#jane-machine[data-screen="results"] #screen-content>.field-label:has(+.resultsContainer) { display:none; }
.ui-icon { width:24px; height:24px; flex:none; }
#navigation-controls:has(.bottom-tabs) { display:flex; flex-direction:column; flex-shrink:0; width:90%; gap:10px; margin:0 auto; padding-top:8px; background:linear-gradient(transparent,#111617 16%); }
.bottom-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; border-top:1px solid var(--jane-line); padding:8px 0 0; }
.bottom-tabs .menu-button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; font:400 .67rem/1.3 Arial,sans-serif; padding:3px 1px 6px; min-height:55px; background:none; border:0; border-radius:0; box-shadow:none; color:var(--jane-muted); letter-spacing:0; }
body:not(.dark-mode) #navigation-controls:has(.bottom-tabs) { background:linear-gradient(transparent,var(--card-bg) 16%); }
.formula-title .ui-icon { width:25px; height:29px; color:var(--jane-accent); }
.formula-title:has(.ui-icon)::before { display:none; }
.results-instruction { min-height:0; height:auto; }
#jane-machine[data-screen="results"]>.question-chassis .question-window:not(.is-error) { background:none; box-shadow:none; border:0; display:block; padding:0 2px 9px; min-height:0; font-size:.86rem; }
#jane-machine[data-screen="results"]>.question-chassis .question-window:not(.is-error)::first-line { color:var(--jane-accent); font-weight:700; font-size:1rem; }
@media(max-height:550px) { .test-card { padding-top:5px; padding-bottom:5px; } .machine-header { flex-direction:row; justify-content:space-between; margin:0 auto 7px; } .machine-header .jane-brand { font-size:1.7rem; } .jane-brand small { font-size:.45rem; } #navigation-controls:has(.bottom-tabs) { gap:3px; padding-top:3px; } #navigation-controls:has(.bottom-tabs)>.menu-button { min-height:44px; padding:5px; } .bottom-tabs { padding-top:3px; } .bottom-tabs .menu-button { min-height:47px; gap:2px; padding:2px; } .bottom-tabs .ui-icon { width:18px; height:18px; } .question-window { min-height:40px; } }
.machine-header .jane-brand { display:block; white-space:nowrap; font-size:clamp(1rem,6.2vw,2rem); letter-spacing:.025em; line-height:1.35; }
@media(max-height:550px) { .machine-header .jane-brand { font-size:1.3rem; } }

/* One navigation system on every screen, with task actions above the tabs. */
.context-actions { display:flex; width:100%; gap:10px; }
.context-actions:empty { display:none; }
#navigation-controls .context-actions>.menu-button { flex:1; min-height:52px; border-radius:16px; font-size:.9rem; font-weight:700; }
#navigation-controls .context-actions>[data-action="results"],#navigation-controls .context-actions>[data-action="mix"],#navigation-controls .context-actions>[data-action="editor-accept"] { background:linear-gradient(160deg,#aeff7e,#8df04f 45%,#51b828); border-color:#b7ff91; box-shadow:inset 0 1px 1px #fff9,inset 0 -3px 6px #37762055,0 0 17px #8df04f22; color:#091303; }
@media(max-height:550px) { #navigation-controls .context-actions>.menu-button { min-height:44px; padding:5px; } }

/* Machined glass edges and soft directional light across the control family. */
.displayWindow,.gardenWindow,.question-window,.formula-card,.mix-volume,.resultsContainer { background:linear-gradient(135deg,#ffffff13 0%,#ffffff06 35%,#0000001f 100%),var(--jane-panel); border-color:#ffffff24; box-shadow:inset 0 1px 1px #ffffff1c,inset 1px 0 0 #ffffff05,inset 0 -1px 1px #0008,0 8px 20px #0004; }
.menu-button,.status-actions .hardware-button,.choice { background:linear-gradient(145deg,#ffffff15 0%,#ffffff05 48%,#0000002b 100%),var(--jane-panel); border:1px solid #ffffff24; box-shadow:inset 0 1px 1px #ffffff20,inset 0 -1px 0 #0007,0 3px 7px #0004; }
.choice { border-radius:8px; }
.menu-button:active:not(:disabled),.volume-step:active:not(:disabled),.choice:active:not(:disabled) { box-shadow:inset 0 2px 6px #0008,inset 0 -1px 0 #ffffff15; }
.volume-control.windowContainer { background:linear-gradient(135deg,#ffffff0d 0%,#0002 100%); border-color:#ffffff28; box-shadow:inset 0 1px 1px #ffffff12,0 5px 15px #0003; }
.volume-step { background:linear-gradient(140deg,#ffffff22 0%,#ffffff06 45%,#0006 100%),#232a2c; box-shadow:inset 0 1px 1px #ffffff35,inset 0 -1px 1px #0009,0 4px 8px #0007; border-color:#ffffff30; }
.volume-control .displayWindow { background:none; border:0; box-shadow:none; }
.context-actions>[data-action="mix"]::before { content:''; display:inline-block; width:16px; height:20px; margin-right:10px; background:currentColor; border-radius:70% 30% 60% 40%; transform:rotate(-35deg); vertical-align:middle; }
@media(max-height:550px) { .bottom-tabs { padding:4px; gap:4px; border-radius:13px; } .bottom-tabs .menu-button { min-height:47px; padding:3px 1px 5px; gap:2px; } .bottom-tabs .ui-icon { width:19px; height:19px; } }
body:not(.dark-mode) .bottom-tabs .menu-button { color:#56625a; }
body:not(.dark-mode) .bottom-tabs .menu-button[aria-current="page"] { color:#286410; }
.volume-readout { min-width:0; text-align:center; }
.volume-caption { display:block; color:var(--jane-muted); font:400 .95rem/1.4 Arial,sans-serif; margin:2px 0 4px; }
.volume-value-line { white-space:nowrap; text-align:center; }
.volume-number-button { display:inline-block; vertical-align:middle; min-width:0; max-width:100%; min-height:62px; padding:0; border:0; background:none; color:var(--text-color); box-shadow:none; cursor:pointer; }
.volume-number-button:has(.volume-number[data-long]) .volume-number { font-size:1rem; letter-spacing:-.04em; }
.volume-unit-button { display:inline-flex; align-items:center; gap:6px; vertical-align:bottom; margin-bottom:10px; min-height:44px; padding:6px 5px; border:1px solid #ffffff09; border-radius:9px; background:linear-gradient(145deg,#ffffff06,transparent); color:var(--jane-muted); font:400 .8rem/1.3 Arial,sans-serif; box-shadow:inset 0 1px 0 #ffffff06; cursor:pointer; }
.volume-unit-button::after { content:''; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); }
.mix-volume>.field-label,#jane-machine[data-screen="results"] #screen-content>.field-label:has(+[data-field="water"]) { display:none; }
@media(max-width:350px) { .volume-unit-button { font-size:.65rem; gap:4px; } .volume-number-button .volume-number { font-size:1.8rem; } .volume-caption { font-size:.85rem; } }
@media(min-width:561px) { .test-bezel { box-shadow:0 0 0 3px #080b0c,0 0 0 4px #5c6467,0 20px 80px #0009; padding:3px; border-radius:32px; } .test-card { border-radius:29px; } }
@media(max-width:350px) { .volume-control.windowContainer { grid-template-columns:44px minmax(0,1fr) 44px; gap:2px; padding:7px; } .volume-step { width:44px; height:44px; } .volume-number { font-size:2rem; } .volume-unit { font-size:.75rem; } .nutrient-bottle { width:31px; height:55px; flex-basis:31px; } .nutrientName { font-size:.88rem; } .dose-number { font-size:1.3rem; } .dose-unit { font-size:.7rem; } }

/* Approved mockup fidelity: one continuous icon dock, no boxed menu tabs. */
#jane-machine .bottom-tabs {
  gap:0;
  padding:10px 0 3px;
  border:1px solid #ffffff16;
  border-bottom:0;
  border-radius:19px 19px 0 0;
  background:linear-gradient(130deg,#ffffff08 0%,#ffffff02 40%,#0002 100%),#141a1c;
  box-shadow:inset 0 1px 0 #ffffff09,0 -5px 18px #0002;
}
#jane-machine .bottom-tabs .menu-button,
#jane-machine .bottom-tabs .menu-button[aria-current="page"] {
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  min-height:66px;
  gap:7px;
  padding:5px 0 12px;
  font:400 .78rem/1.3 Arial,sans-serif;
}
#jane-machine .bottom-tabs .menu-button::before { display:none; }
#jane-machine .bottom-tabs .ui-icon { width:27px; height:27px; filter:drop-shadow(0 1px 0 #ffffff1c) drop-shadow(0 2px 2px #0008); }
#jane-machine .bottom-tabs .menu-button[aria-current="page"]::after { bottom:2px; width:34px; height:3px; background:#8bea58; box-shadow:0 0 6px #8bea5825; }

/* Broad highlights, a shaded lower edge and a soft cast shadow define depth. */
#jane-machine .displayWindow,
#jane-machine .gardenWindow,
#jane-machine .choice:not(.is-selected),
#jane-machine .status-actions .hardware-button,
#jane-machine .context-actions>.menu-button {
  border:1px solid #ffffff29;
  background:linear-gradient(135deg,#ffffff12 0%,transparent 48%),linear-gradient(180deg,#30383b 0%,#252c2f 48%,#181e20 100%);
  box-shadow:inset 0 1px 1px #ffffff24,inset 1px 0 0 #ffffff06,inset 0 -2px 2px #0006,0 5px 12px #0005;
}
#jane-machine .volume-step {
  background:linear-gradient(140deg,#3c4447 0%,#2b3336 40%,#151b1d 100%);
  border:1px solid #ffffff32;
  box-shadow:inset 0 1px 1px #ffffff2e,inset 0 -1px 1px #0009,0 4px 10px #0008;
}
#jane-machine .mix-volume,
#jane-machine .formula-card,
#jane-machine .resultsContainer {
  border:1px solid #ffffff24;
  background:linear-gradient(125deg,#ffffff0b 0%,#ffffff02 48%,#00000020 100%),#1b2224;
  box-shadow:inset 0 1px 0 #ffffff0f,inset 0 -1px 1px #0007,0 7px 18px #0004;
}
#jane-machine .volume-control.windowContainer {
  background:linear-gradient(130deg,#353d40 0%,#272f32 43%,#192023 100%);
  border:1px solid #ffffff26;
  box-shadow:inset 0 1px 1px #ffffff12,inset 0 -1px 1px #0007,0 4px 10px #0003;
}
#jane-machine .context-actions>[data-action="results"],
#jane-machine .context-actions>[data-action="mix"],
#jane-machine .context-actions>[data-action="editor-accept"] {
  background:linear-gradient(150deg,#b1ff7e 0%,#90f14d 35%,#74dd37 65%,#4bb423 100%);
  border:1px solid #c4ffa4;
  color:#081101;
  box-shadow:inset 0 2px 2px #f1ffcf99,inset 0 -3px 6px #2b710b44,0 0 18px #89f04b26,0 4px 10px #0005;
  min-height:58px;
  border-radius:19px;
  font:800 1.25rem/1.3 Arial,sans-serif;
  letter-spacing:.045em;
}
#jane-machine .menu-button[aria-checked="true"],#jane-machine .choice.is-selected {
  background:linear-gradient(145deg,#a5f575,#73cf45);
  color:#102006;
  box-shadow:inset 0 1px 0 #e6ffd199,inset 0 -2px 4px #3e841c55,0 3px 8px #0003;
}
#jane-machine .context-actions>.menu-button:active:not(:disabled),#jane-machine .volume-step:active:not(:disabled),#jane-machine .displayWindow:active:not(:disabled) { box-shadow:inset 0 3px 8px #0006,inset 0 -1px 0 #ffffff13; }
#jane-machine .formula-card [data-field="nutrientPlan"] .displayWindow { background:none; box-shadow:none; border:0; }
@media(max-height:550px) { #jane-machine .bottom-tabs { padding-top:4px; } #jane-machine .bottom-tabs .menu-button { min-height:47px; padding:2px 0 6px; gap:3px; font-size:.65rem; } #jane-machine .bottom-tabs .ui-icon { width:20px; height:20px; } #jane-machine .context-actions>[data-action="results"],#jane-machine .context-actions>[data-action="mix"],#jane-machine .context-actions>[data-action="editor-accept"] { min-height:44px; font-size:1rem; } }

/* Garden summary lives at the top; retain prompts only when action is needed. */
#jane-machine[data-screen="garden"]>.question-chassis { display:none; }
#jane-machine[data-screen="garden"]>.question-chassis:has(.is-error),
#jane-machine[data-screen="garden"]:has(.editor-active)>.question-chassis,
#jane-machine[data-screen="garden"]:has([data-action="start-bloom"])>.question-chassis { display:block; }
.garden-heading { width:90%; margin:0 auto 16px; padding:3px 10px 7px; border-radius:20px; }
.garden-heading>.field-label { display:none; }
.garden-heading .windowContainer { width:100%; margin:0; }
.garden-heading .windowContainer>.field-trigger { display:grid; grid-template-columns:28px minmax(0,1fr) 28px; gap:8px; align-items:center; min-height:44px; padding:5px 3px; font-size:1.2rem; line-height:1.35; }
.garden-heading .field-trigger .field-value { text-align:center; }
.garden-heading [data-field="identity"] .field-trigger::before,.garden-heading [data-field="identity"] .field-trigger::after { margin:0; justify-self:center; }
.garden-phase-summary { margin:0; padding:0 3px; color:var(--jane-accent); font:500 .82rem/1.35 Arial,sans-serif; text-align:center; cursor:default; }

/* Flat inactive silhouettes become illuminated green objects only when selected. */
#jane-machine .bottom-tabs .ui-icon { filter:none; }
.ui-icon .icon-lit { display:none; }
.bottom-tabs [aria-current="page"] .icon-flat { display:none; }
.bottom-tabs [aria-current="page"] .icon-lit { display:inline; }
#jane-machine .bottom-tabs [aria-current="page"] .ui-icon { filter:drop-shadow(0 2px 1px #0009) drop-shadow(0 0 3px #64ec2720); }

/* The original approved sprout identifies the Grow phase beside the garden name. */
.garden-heading[data-phase="grow"] [data-field="identity"] .field-trigger::before {
 width:28px; height:28px; border:0; border-radius:0; transform:none;
 background:url("janeSprout.89ddb89ef40ff269.webp") center/contain no-repeat;
}

.garden-heading[data-phase="bloom"] [data-field="identity"] .field-trigger::before {
 width:28px; height:28px; border:0; border-radius:0; transform:none;
 background:url("janeBloom.6f723b459a38da88.webp") center/contain no-repeat;
}

.formula-ph-setup { display:block; margin:0; width:100%; }
.formula-ph-setup > div { width:100%; }
.ph-block:has(.formula-ph-setup) { margin-top:0; padding:0; }
.ph-setup-trigger { color:var(--jane-muted); cursor:pointer; }
.ph-setup-trigger .nutrient-bottle { filter:grayscale(1); opacity:.55; }

.ph-tier-footnote { margin:7px 0 0; font:400 .75rem/1.5 Arial,sans-serif; color:var(--jane-muted); }

.ph-instruction { text-align:center; }

.results-garden-name { width:90%; margin:0 auto 12px; text-align:center; color:var(--text-color); font:600 1.2rem/1.35 Arial,sans-serif; overflow-wrap:anywhere; }

#jane-machine .bottom-tabs .menu-button[aria-current="page"] { color:var(--jane-accent); }
#jane-machine .bottom-tabs .menu-button[aria-current="page"]::after { content:''; display:block; position:absolute; bottom:2px; width:34px; height:3px; border-radius:2px; background:var(--jane-accent); box-shadow:0 0 6px #8bea5825; }
#jane-machine .bottom-tabs .menu-button:disabled { opacity:.35; }
body:not(.dark-mode) #jane-machine .bottom-tabs .menu-button[aria-current="page"] { color:#286410; }
#jane-machine[data-screen="results"] .resultsContainer .ph-instruction { text-align:center; }

/* Light labels remain legible while the active icon keeps its vivid green artwork. */
body:not(.dark-mode) { --jane-accent:#34751c; }

/* Owner-approved light accent: original Jane water blue; dark stays green. */
body:not(.dark-mode) { --jane-accent:#0066cc; }
body:not(.dark-mode) #jane-machine .bottom-tabs .menu-button[aria-current="page"] { color:var(--jane-accent); }
body:not(.dark-mode) #jane-machine .bottom-tabs .menu-button[aria-current="page"]::after { box-shadow:0 0 6px #0066cc25; }
body:not(.dark-mode) #jane-machine .bottom-tabs [aria-current="page"] .ui-icon {
 filter:hue-rotate(110deg) drop-shadow(0 2px 1px #00336655) drop-shadow(0 0 3px #0066cc20);
}

.support-destinations { margin:24px 0 8px; }
.support-destinations h2 { font:600 1rem/1.4 Arial,sans-serif;color:var(--text-color);margin:0 0 12px; }
.support-destinations .support-link { display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:48px;margin:8px 0;padding:12px 14px;border:1px solid var(--jane-line);border-radius:14px;background:var(--lh-control,var(--jane-panel));box-shadow:var(--lh-rim);color:var(--text-color);font:500 .9rem/1.4 Arial,sans-serif;text-decoration:none; }
.support-destinations .support-link:hover { border-color:var(--jane-accent); }
.support-destinations .support-link:focus-visible { outline:2px solid var(--jane-accent);outline-offset:3px; }
.support-note { font:400 .78rem/1.5 Arial,sans-serif;color:var(--jane-muted);margin:12px 0; }

.water-confirmation {position:fixed;inset:0;margin:auto;background:#252827;color:#f1f3f2;border:1px solid #79837b;border-radius:16px;padding:22px;width:360px;max-width:calc(100vw - 32px);box-sizing:border-box;box-shadow:0 16px 50px #0009;text-align:center;}
.water-confirmation::backdrop {background:#000a;}
.water-confirmation h2 {color:#ff7070;font-size:clamp(32px,10vw,48px);margin:0 0 16px;overflow-wrap:anywhere;}
.water-confirmation p {font-size:20px;}
.water-confirmation-actions {display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.water-confirmation-actions button {min-height:44px;padding:10px 14px;}

/* Shared live phone windows: reflow the same controls without recreating state on resize. */
.live-controls,.live-formula {display:contents;}
.tablet-extra,.tablet-gardens {display:none;}
@media(min-width:600px) and (max-width:899px) {
 .test-bezel:has(.live-windows) {width:min(calc(100vw - 24px),740px);}
}
@media(min-width:900px) {
 .test-bezel:has(.live-windows) {width:min(calc(100vw - 24px),1580px);max-height:none;}
 #jane-machine.live-windows {overflow:hidden;}
 #jane-machine.live-windows .machine-header {margin-bottom:10px;}
 #jane-machine.live-windows>.question-chassis {width:calc(100% - 32px);}
 #jane-machine.live-windows .live-controls>.windowContainer,
 #jane-machine.live-windows .live-controls>.card-row,
 #jane-machine.live-windows .live-controls>.card-row>.windowContainer,
 #jane-machine.live-windows .live-controls>.card-row>.menuContainer,
 #jane-machine.live-windows .live-controls>.mix-volume,
 #jane-machine.live-windows .live-controls>.garden-heading,
 #jane-machine.live-windows .live-formula>.formula-card {width:100%;margin-inline:0;}
 #jane-machine.live-windows #screen-content {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;align-items:stretch;padding:0 16px 12px;overflow:hidden;}
 #jane-machine.live-windows .live-controls,#jane-machine.live-windows .live-formula {display:block;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:8px 0 16px;}
 #jane-machine.live-windows .live-controls {grid-column:1;}
 #jane-machine.live-windows .live-formula {grid-column:2;}
 #jane-machine.live-windows .tablet-extra {display:block;}
 #jane-machine.live-windows .tablet-extra>h2 {font:600 1.2rem/1.4 Orbitron,sans-serif;overflow-wrap:anywhere;}
 #jane-machine.live-windows .tablet-extra>p {color:var(--jane-muted);}
 #jane-machine.live-windows .tablet-gardens {display:flex;grid-column:1/-1;gap:10px;overflow:auto;min-width:0;max-height:100px;}
 #jane-machine.live-windows .tablet-gardens .gardenWindow {flex:0 0 190px;width:190px;min-height:70px;padding:10px;gap:2px;font-size:.75rem;text-align:left;align-items:flex-start;}
 #jane-machine.live-windows .tablet-gardens .gardenWindow strong {font-size:.95rem;overflow-wrap:anywhere;}
 #jane-machine.live-windows .tablet-gardens [aria-current="true"] {border-color:var(--jane-accent);box-shadow:inset 0 0 0 1px var(--jane-accent);}
 #jane-machine.live-windows .tablet-gardens .gardenWindow:disabled {opacity:.4;}
 #jane-machine.live-windows .context-actions {max-width:520px;margin-inline:auto;}
 #jane-machine.live-windows .bottom-tabs {max-width:680px;margin-inline:auto;}
 #jane-machine.live-windows .nutrientAmount {font-size:1.25rem;}
 #jane-machine.live-windows .formula-card {margin-bottom:12px;}
}
@media(min-width:1200px) {
 #jane-machine.farmer-windows #screen-content {grid-template-columns:minmax(220px,.65fr) minmax(330px,1fr) minmax(360px,1.15fr);}
 #jane-machine.farmer-windows .tablet-gardens {display:flex;flex-direction:column;grid-column:1;grid-row:1;max-height:none;overflow:auto;}
 #jane-machine.farmer-windows .tablet-gardens .gardenWindow {width:100%;flex:0 0 auto;min-height:95px;}
 #jane-machine.farmer-windows .live-controls {grid-column:2;}
 #jane-machine.farmer-windows .live-formula {grid-column:3;}
}

@media(min-width:900px) {
 #jane-machine.live-windows .context-actions {width:52%;max-width:none;margin-left:auto;margin-right:0;}
}
@media(min-width:1200px) {
 #jane-machine.farmer-windows .context-actions {width:40%;}
}

@media(min-width:900px) {
 #jane-machine.live-windows .tablet-garden-label {position:sticky;top:-8px;z-index:2;margin:0 5% 10px;padding:10px 4px;background:var(--card-bg);font:600 1rem/1.4 Orbitron,sans-serif;text-align:left;overflow-wrap:anywhere;}
 #jane-machine.live-windows .tablet-gardens {overscroll-behavior:contain;scrollbar-width:thin;}
}

/* A tablet-only control being edited stays visible if the window narrows. */
@media(max-width:899px) {
 .tablet-extra:has(.editor-active) {display:block;}
}

@media(min-width:900px) {
 #jane-machine.live-windows #screen-content {grid-template-rows:minmax(0,1fr);}
 #jane-machine.farmer-windows #screen-content {grid-template-rows:auto minmax(0,1fr);}
 #jane-machine.farmer-windows .live-controls,#jane-machine.farmer-windows .live-formula {grid-row:2;}
}
@media(min-width:1200px) {
 #jane-machine.farmer-windows #screen-content {grid-template-rows:minmax(0,1fr);}
 #jane-machine.farmer-windows .live-controls,#jane-machine.farmer-windows .live-formula {grid-row:1;}
}

/* Give unused tablet control space Jane artwork without enlarging working controls. */
.tablet-art {display:none;}
@media(min-width:900px) {
 #jane-machine.live-windows .live-controls {display:flex;flex-direction:column;}
 #jane-machine.live-windows .live-controls> :not(.tablet-art) {flex-shrink:0;}
 #jane-machine.live-windows .tablet-art {display:block;position:relative;flex:1 1 0;min-height:0;margin:12px 5% 0;overflow:hidden;pointer-events:none;}
 #jane-machine.live-windows .tablet-art::before {content:'';position:absolute;inset:5%;background:radial-gradient(ellipse,#86d65b16,transparent 68%);}
 #jane-machine.live-windows .tablet-art img {position:absolute;inset:0;width:100%;height:100%;max-height:380px;margin:auto;object-fit:contain;opacity:.7;filter:drop-shadow(0 16px 20px #0005);}
 body:not(.dark-mode) #jane-machine.live-windows .tablet-art img {opacity:.55;}
}
@media(prefers-reduced-motion:reduce) {.tablet-art {animation:none;}}

/* Give the selected plan more presence in tablet windows, preserving phone sizing. */
@media(min-width:600px) {
 #jane-machine.live-windows [data-field="nutrientPlan"] .field-trigger,
 #jane-machine.live-windows .formula-card [data-field="nutrientPlan"] .field-trigger {
  min-height:88px;padding:16px 12px;font-size:1.125rem;line-height:1.5;color:var(--text-color);
 }
}

.free-pause{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}.free-pause img{display:block;width:auto;max-width:100%;height:auto;max-height:58svh;object-fit:contain;border-radius:8px}.free-pause figcaption{font:14px/1.4 Arial,sans-serif;text-align:center;color:var(--muted,#aaa)}