/* Liquid Hardware material system. Also delivered to the private website admin.
   A broad upper-left light and lower-right falloff give every face curvature. */
body[data-material="liquid"] {
  --lh-panel:radial-gradient(ellipse at 5% -30%,#d7e8ed24 0%,#c6dce00b 40%,transparent 68%),linear-gradient(125deg,#2b3235 0%,#20272a 47%,#111719 100%);
  --lh-control:radial-gradient(ellipse at 0% -25%,#e4f3f33b 0%,#ccdce512 36%,transparent 68%),linear-gradient(118deg,#30383b 0%,#222a2d 47%,#111719 100%);
  --lh-rim:inset 0 1px 1px #ffffff26,inset 1px 0 0 #ffffff08,inset 0 -1px 2px #0008;
  --lh-cast:0 6px 14px #0006;
  --lh-green:radial-gradient(ellipse at 10% -50%,#efffdc99 0%,transparent 65%),linear-gradient(180deg,#ffffff27 0%,transparent 17%,transparent 70%,#1d7b003b 100%),linear-gradient(110deg,#8ff13b 0%,#70e132 48%,#4fc51f 100%);
}

/* Outer shells and independent panels. */
body[data-material="liquid"] #jane-machine .mix-volume,
body[data-material="liquid"] #jane-machine .garden-heading,
body[data-material="liquid"] #jane-machine .formula-card,
body[data-material="liquid"] #jane-machine .resultsContainer,
body[data-material="liquid"] #jane-machine .question-window,
body[data-material="liquid"] .owner-machine,
body[data-material="liquid"] .owner-machine .tester,
body[data-material="liquid"] .owner-machine .manager-stat,
body[data-material="liquid"] .owner-machine .invitation,
body[data-material="liquid"] .owner-machine .manager-note,
body[data-material="liquid"] .owner-machine .readout,
body[data-material="liquid"] .management-menu,
body[data-material="liquid"]>main,
body[data-material="liquid"] article,
body[data-material="liquid"] .metric,
body[data-material="liquid"] .mailbox,
body[data-material="liquid"] .version-row,
body[data-material="liquid"] .notice,
body[data-material="liquid"] #status,
body[data-material="liquid"] #workspace>nav {
  background:var(--lh-panel);
  border:1px solid #b9d1d329;
  border-top-color:#d8eced3b;
  border-bottom-color:#030a0b99;
  box-shadow:var(--lh-rim),var(--lh-cast);
}

/* Every nutrient row is an individually curved face, as in the reference. */
body[data-material="liquid"] #jane-machine .nutrient-row {
  background:radial-gradient(ellipse at 2% -50%,#dceef238 0%,#cedfe00c 40%,transparent 68%),linear-gradient(112deg,#2b3336 0%,#1c2427 48%,#101618 100%);
  border:1px solid #b9d1d31f;
  border-top-color:#cfe4e52d;
  border-bottom-color:#02070788;
  border-radius:12px;
  box-shadow:inset 0 1px 1px #ffffff17,inset 0 -2px 3px #0004,0 3px 7px #0003;
}

/* Reservoir inner window, editable displays and ordinary button faces. */
body[data-material="liquid"] #jane-machine .volume-control.windowContainer,
body[data-material="liquid"] #jane-machine .displayWindow,
body[data-material="liquid"] #jane-machine .gardenWindow,
body[data-material="liquid"] #jane-machine .choice:not(.is-selected),
body[data-material="liquid"] #jane-machine .status-actions .hardware-button,
body[data-material="liquid"] #jane-machine .context-actions>.menu-button,
body[data-material="liquid"] .owner-machine button,
body[data-material="liquid"] .owner-machine a,
body[data-material="liquid"] .owner-machine .tier-options span,
body[data-material="liquid"] #workspace button,
body[data-material="liquid"] #login-form button {
  background:var(--lh-control);
  border:1px solid #bad1d334;
  border-top-color:#d9e9eb4a;
  border-bottom-color:#030809bb;
  box-shadow:var(--lh-rim),0 4px 10px #0006;
}
body[data-material="liquid"] #jane-machine .volume-step {
  background:radial-gradient(ellipse at 20% 5%,#dcecef27,transparent 63%),linear-gradient(140deg,#3c4549 0%,#283236 43%,#11191b 100%);
  border:1px solid #c0d6d53d;
  border-bottom-color:#020a0abb;
  box-shadow:inset 0 1px 1px #ffffff29,inset 0 -2px 4px #0006,0 5px 9px #0008;
}
body[data-material="liquid"] #jane-machine .volume-unit-button {
  background:radial-gradient(ellipse at 0% 0%,#ffffff10,transparent 75%);
  border-color:#ffffff0a;
  box-shadow:inset 0 1px 0 #ffffff09;
}

/* Primary green action has a bright curved top and a deeper green underside. */
body[data-material="liquid"] #jane-machine .context-actions>[data-action="mix"],
body[data-material="liquid"] #jane-machine .context-actions>[data-action="results"],
body[data-material="liquid"] #jane-machine .context-actions>[data-action="editor-accept"],
body[data-material="liquid"] #jane-machine .menu-button[aria-checked="true"],
body[data-material="liquid"] #jane-machine .choice.is-selected,
body[data-material="liquid"] .owner-machine button[type="submit"],
body[data-material="liquid"] .owner-machine #run-data-checks,
body[data-material="liquid"] .owner-machine .tier-options input:checked+span,
body[data-material="liquid"] #workspace form>button:not([type="button"]),
body[data-material="liquid"] #login-form button {
  background:var(--lh-green);
  border:1px solid #b5ff8c;
  border-top-color:#eaffd0;
  border-bottom-color:#408c21;
  color:#091303;
  box-shadow:inset 0 2px 2px #f2ffdc8c,inset 0 -3px 5px #28740744,0 0 16px #83ec4020,0 5px 12px #0006;
}

/* Recessed form fields retain the same light direction. */
body[data-material="liquid"] input:not([type="checkbox"]):not([type="radio"]),
body[data-material="liquid"] textarea,
body[data-material="liquid"] select,
body[data-material="liquid"] #jane-machine .editor-surface {
  background:radial-gradient(ellipse at 0% -40%,#a3bdc51a,transparent 75%),linear-gradient(120deg,#1c2528,#101719);
  border:1px solid #a9c2c333;
  border-top-color:#030b0ccc;
  border-bottom-color:#c8dddd26;
  color:#edf4f2;
  box-shadow:inset 0 3px 6px #0007,0 1px 0 #dcecee0a;
}

/* A single dock, with no individual boxes behind the menu icons. */
body[data-material="liquid"] #jane-machine .bottom-tabs {
  background:radial-gradient(ellipse at 0% -40%,#dae9ef14,transparent 70%),linear-gradient(120deg,#1d2528,#101719);
  box-shadow:inset 0 1px 0 #ffffff14,0 -3px 10px #0003;
}
body[data-material="liquid"] #jane-machine .bottom-tabs .menu-button,
body[data-material="liquid"] #jane-machine .bottom-tabs .menu-button[aria-current="page"] { background:none;border:0;box-shadow:none; }
body[data-material="liquid"] .owner-machine .management-menu [aria-current="page"],
body[data-material="liquid"] #workspace>nav button[aria-current="page"] {
  background:radial-gradient(ellipse at 0% -20%,#b4ff7c20,transparent 80%),linear-gradient(120deg,#2c3d30,#19261e);
  color:#a1f471;
  box-shadow:inset 3px 0 0 #9bef68,inset 0 1px 0 #d1ffb32b,0 4px 9px #0004;
  border-color:#a5f4794d;
}
body[data-material="liquid"] #jane-machine .formula-card [data-field="nutrientPlan"] .displayWindow { background:none;border:0;box-shadow:none; }
body[data-material="liquid"] #jane-machine .garden-heading .displayWindow { background:none;border:0;box-shadow:none; }
body[data-material="liquid"] button:active:not(:disabled),body[data-material="liquid"] #jane-machine .context-actions>.menu-button:active:not(:disabled) { box-shadow:inset 0 3px 7px #0006,inset 0 -1px 0 #ffffff15; }

/* Preserve the existing optional light appearance with the same curvature. */
body[data-material="liquid"]:not(.dark-mode):has(#jane-machine) {
  --lh-panel:radial-gradient(ellipse at 0% -30%,#fff 0%,transparent 70%),linear-gradient(125deg,#eef3ee,#dce4df 55%,#c4ceca);
  --lh-control:radial-gradient(ellipse at 0% -25%,#fff 0%,transparent 70%),linear-gradient(120deg,#f5f8f5,#dce5df 55%,#bdcbc3);
  --lh-rim:inset 0 1px 1px #fff,inset 0 -1px 2px #586c6433;
  --lh-cast:0 5px 12px #233e3525;
}
body[data-material="liquid"]:not(.dark-mode) #jane-machine .nutrient-row { background:var(--lh-control);border-color:#56695d25;box-shadow:var(--lh-rim),0 3px 8px #233e351a; }

body[data-material="liquid"]:not(.dark-mode) #jane-machine .bottom-tabs {
 background:var(--lh-panel);
 border-color:#56695d25;
 box-shadow:var(--lh-rim),0 -3px 10px #233e3515;
}

/* Light controls keep the same sculpted material instead of a dark inset. */
body[data-material="liquid"]:not(.dark-mode) #jane-machine .volume-step {
 background:var(--lh-control); border-color:#56695d40; color:#286410;
 box-shadow:var(--lh-rim),0 4px 8px #233e3525;
}
body[data-material="liquid"]:not(.dark-mode):has(#jane-machine) input:not([type="checkbox"]):not([type="radio"]),
body[data-material="liquid"]:not(.dark-mode):has(#jane-machine) textarea,
body[data-material="liquid"]:not(.dark-mode):has(#jane-machine) select,
body[data-material="liquid"]:not(.dark-mode) #jane-machine .editor-surface {
 background:linear-gradient(135deg,#dbe4de,#f5f8f5); color:var(--text-color);
 border-color:#657b6d55; box-shadow:inset 0 2px 5px #233e3520,0 1px 0 #fff;
}

/* Light app actions carry the old Jane blue with the same sculpted finish. */
body[data-material="liquid"]:not(.dark-mode) #jane-machine .volume-step { color:#0066cc; }
body[data-material="liquid"]:not(.dark-mode) #jane-machine .context-actions>[data-action="mix"],
body[data-material="liquid"]:not(.dark-mode) #jane-machine .context-actions>[data-action="results"],
body[data-material="liquid"]:not(.dark-mode) #jane-machine .context-actions>[data-action="editor-accept"],
body[data-material="liquid"]:not(.dark-mode) #jane-machine .menu-button[aria-checked="true"],
body[data-material="liquid"]:not(.dark-mode) #jane-machine .choice.is-selected {
 background:radial-gradient(ellipse at 10% -50%,#dcf1ff99 0%,transparent 65%),linear-gradient(180deg,#ffffff27 0%,transparent 17%,transparent 70%,#00356b44 100%),linear-gradient(110deg,#0875dc 0%,#0066cc 48%,#0056ad 100%);
 color:#fff; border-color:#75b9ff; border-top-color:#d0eaff; border-bottom-color:#003d80;
 box-shadow:inset 0 2px 2px #dcefff8c,inset 0 -3px 5px #00336644,0 0 16px #0066cc20,0 5px 12px #0004;
}