/* imports differnt fonts */
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&subset=latin-ext");

/* To remove spinner for number inputs
/* Chrome, Safari, Edge, Opera */
/* input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
} */

/* Firefox */
/* input[type=number] {
  -moz-appearance: textfield;
} */


/* Gets rid of all native formating */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Secondary buttons by default; #Save is the primary action */
button {
  margin: 10px 8px;
  padding: 7px 14px;
  font: 600 14px "Source Sans Pro", sans-serif;
  color: var(--accent);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
}
button:hover {
  background-color: var(--accent-soft);
  border-color: var(--accent);
}
#Save {
  color: var(--surface);
  background-color: var(--accent);
  border-color: var(--accent);
}
#Save:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}

body {
  width: 100%;
  float: left;
  margin: 0 0 0 0;
  padding: 10px;
  color: var(--ink);
  background-color: var(--canvas);

}
.content {
  width: 40%;
  float: left;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  text-align: left;
  padding-top: 1%;
  padding-right: 3%;
  padding-bottom: 1%;
  background-color: var(--surface);
  margin-left: 1%;
  margin-top: 2%;
}
.floaty {
  width: 25%;
  margin: 3% 0 0 1%;
  float: left;
text-align: right;
padding-right: 4%;
padding-bottom: 1%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background-color: var(--surface);
  line-height: 1.8;
}
.floaty2 {
  width: 30%;
  margin: 3% 0 0 1%;
  padding-left: 1%;
  padding-bottom: 1%;
  line-height: 1.8;
  float: left;
  text-align: left;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background-color: var(--surface);
}
.floaty3 {
  width: 50%;
  margin: 6% 0 0 25%;
text-align: center;
padding-right: 4%;
padding-bottom: 0;
border-radius: 25px;
}
.floaty4 {
  width: 60%;
  margin: 0 0 0 20%;
text-align: center;
padding-right: 4%;
padding-bottom: 1%;
border-radius: 25px;
}

h1 {
  padding: 1% 0 -1% 0;
  text-align: center;
  color: var(--ink);
}

h2 {
  color: var(--ink-2);
}

.slider1_parent {
  padding-bottom: 6px;
  padding-left: 20px;
  font-family: "Source Sans Pro", sans-serif;
}
.slider1_parent .title {
  display: inline-block;
  line-height: 28px;
  margin: 0 -4px 0 9px;
  color: var(--ink);
}
/* input box for sliders */
.slider1_parent .slider1 {
  border: solid 1px var(--border-strong);
  border-radius: 4px;
  width: 60px;
  padding: 0 0 0 0;
  height: 18px;
  vertical-align: top;
  margin: 4px 4px 4px 10px;
}
.slider1_parent .main_block .groove_parent {
  width: calc(100% - 20px);
  margin: auto;
  position: relative;
  height: 20px;
}
.slider1_parent .main_block .groove_parent .groove {
  position: relative;
  height: 4px;
  background-color: var(--surface-sunken);
  top: 8px;
  border-radius: 5px;
  border: solid 1px var(--border);
  overflow: hidden;
  cursor: pointer;
}
.slider1_parent .main_block .groove_parent .groove:hover {
  filter: invert(3%);
}
/* Groove fill properties */
.slider1_parent .main_block .groove_parent .groove .fill {
  height: 4px;
  width: 0;
  background-color: var(--accent);
}
/* slider adjuster properties */
.slider1_parent .main_block .groove_parent .rider {
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: var(--surface);
  top: 0;
  border-radius: 13px;
  margin: 2px;
  border: solid 1.5px var(--accent);
  box-shadow: 0 1px 3px oklch(30% 0.03 250 / 0.2);
  cursor: pointer;
  left: calc(0% - 11px);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  transition: background-color 0.15s ease-out;
}
/* slider adjuster color when hovering over */
.slider1_parent .main_block .groove_parent .rider:hover {
  background-color: var(--accent-soft);
}
/* slider adjuster color when moving */
.slider1_parent .main_block .groove_parent .rider:active {
  background-color: oklch(88% 0.06 245);
}
.slider1_parent .main_block .slider_range {
  width: calc(100% - 19px);
  height: 13px;
  display: block;
  font-size: 0px;
  margin: 4px auto auto;
}
.slider1_parent .main_block .slider_range tr {
  width: 100%;
  display: inline-flex;
}
.slider1_parent .main_block .slider_range tr .left {
  width: 50%;
  padding: 1px 5px;
  margin-top: -9px;
}
.slider1_parent .main_block .slider_range tr .right {
  width: 50%;
  text-align: right;
  padding: 1px 5px;
  margin-top: -9px;
}

#slider1,
#slider2,
#slider3,
#slider4,
#slider5,
#slider6,
#slider7,
#slider8 {
  width: 10%;
  float: right;
  text-align: center;
}

#tablet,
#panSurfaceSpeed,
#numGuns,
#dewPoint,
#surfaceArea,
#bulk,
#coatingTime,
#perBatch,
#perTablet,
#perMm2,
#perGun,
#perSprayAmount,
#sprayAmount,
#panFill {
  text-align: center;
}

/* Inputs and calculated (read-only) fields */
.floaty input,
.floaty select,
.toolbar input {
  height: 26px;
  padding: 0 6px;
  font: 15px "Source Sans Pro", sans-serif;
  line-height: normal;
  vertical-align: middle;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
}
.floaty input {
  width: 80px;
}
.floaty input:disabled {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  background-color: var(--surface-sunken);
  border-color: var(--border);
  opacity: 1;
}
.slider1,
.floaty input {
  font-variant-numeric: tabular-nums;
}

/* Range status set by setColor() in main.js: in range, caution, out of range */
input[data-status="ok"] {
  color: var(--ok-ink);
  -webkit-text-fill-color: var(--ok-ink);
  background-color: var(--ok-bg) !important;
  border-color: var(--ok-border) !important;
}
input[data-status="warn"] {
  color: var(--warn-ink);
  -webkit-text-fill-color: var(--warn-ink);
  background-color: var(--warn-bg) !important;
  border-color: var(--warn-border) !important;
}
input[data-status="bad"] {
  color: var(--bad-ink);
  -webkit-text-fill-color: var(--bad-ink);
  background-color: var(--bad-bg) !important;
  border-color: var(--bad-border) !important;
}

#HL,
#risks {
  color: var(--bad-ink);
}
#HL {
  font-weight: 600;
}
#counter {
  color: var(--ink-2);
}

/* Popup container - can be anything you want */
/* .popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
} */

/* The actual popup */
/* .popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
} */

/* Popup arrow */
/* .popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
} */

/* Toggle this class - hide and show the popup */
/* .popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  -webkit-animation: fadeOut 1s;
} */



/* Add animation (fade in the popup) */
/* @-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}
@-webkit-keyframes fadeOut {
  from {opacity: 1;} 
  to {opacity: 0;}
} */



/*# sourceMappingURL=slider.css.map */

/* Pan picker: the title with a caret, and a transparent select over it */
.panChooser {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.panChooser .caret {
  width: 0.55em;
  height: 0.55em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.panChooser select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}
.panChooser:hover {
  color: var(--accent);
}
.panChooser:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: 6px;
}

/* The widget's min/max label row is empty (font-size 0) but takes space;
   the tick-mark scale below replaces it */
.slider1_parent .main_block .slider_range {
  display: none;
}

/* Tick marks under each slider, positioned by value */
.slider1_parent .main_block .scale {
  position: relative;
  width: calc(100% - 20px);
  height: 30px;
  margin: -4px auto 0;
}
.slider1_parent .main_block .scale .tick {
  position: absolute;
  transform: translateX(-50%);
  text-align: center;
  font-size: 14px;
  line-height: 1.1;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.slider1_parent .main_block .scale .tick::before {
  content: "|";
  display: block;
  color: var(--border-strong);
}

/* Button links: no underline on the whitespace between them */
.floaty4 a {
  text-decoration: none;
}

/* Top-right toolbar: description, save, counter, page links, log in/out */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 0 0.5% 4px 1%;
  font-family: "Source Sans Pro", sans-serif;
}
.toolbar button,
.toolbar .lockedButton {
  margin: 0;
}
.toolbar form,
.toolbar a {
  display: inline-flex;
  text-decoration: none;
}
/* Logged out: the description box is greyed like the locked buttons */
.toolbar .lockedContent {
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}
.toolbarField {
  color: var(--ink-2);
}
.toolbarField input {
  height: 32px;
  width: 160px;
  margin-left: 4px;
  padding: 0 8px;
  font: 15px "Source Sans Pro", sans-serif;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.toolbar #counter {
  margin: 0 4px;
  font-size: 14px;
}

/* Risks sits below the coating conditions gauge */
.risks {
  margin-top: 16px;
}

/* Logged-out preview of the members-only panels: greyed out and inert, with
   a log-in badge over each */
.locked {
  position: relative;
}
.locked .lockedContent,
.lockedActions .lockedContent {
  filter: grayscale(1);
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}
.locked .blurred {
  filter: blur(5px);
}
.locked .conditionsIntro {
  color: var(--ink-2);
}
.locked .conditionsLabel {
  margin: 10px 0 6px;
  font-size: 22px;
  font-weight: 600;
}
.locked .conditionsDetail {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.conditions.locked {
  text-align: center;
  padding: 14px 3% 12px;
  font-family: "Source Sans Pro", sans-serif;
  line-height: 1.3;
}
/* Placeholder gauge: equal bands, so no real thresholds are shown */
.teaserGauge {
  display: flex;
  height: 18px;
}
.teaserGauge span {
  flex: 1;
}
/* Same blend as the real gauge, on equal-width bands */
.teaserGauge {
  background: linear-gradient(
    to right,
    #1f5fa8 0%,
    #6baed6 40%,
    #8cc084 40%,
    #8cc084 60%,
    #e2c17a 60%,
    #a0622d 100%
  );
}
.teaserEnds {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 14px;
}
.risks.locked .lockedContent {
  padding-bottom: 14px;
}
.skeleton {
  display: block;
  height: 10px;
  margin: 12px 4% 0 0;
  border-radius: 5px;
  background: var(--border-strong);
}
.skeleton.short {
  width: 60%;
}
.unlockPill {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font: 600 14px "Source Sans Pro", sans-serif;
  color: var(--accent);
  white-space: nowrap;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: var(--shadow);
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}
.unlockPill:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.unlockPill svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* The save/runs/pans badge sits in its own row under the greyed buttons */
.lockedActions .lockedContent {
  display: inline-block;
}
/* Members-only buttons for logged-out visitors: greyed, with a lock */
.lockedButton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 8px;
  padding: 7px 14px;
  font: 600 14px "Source Sans Pro", sans-serif;
  color: var(--ink-3);
  text-decoration: none;
  background: var(--surface-sunken);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  transition: color 0.15s ease-out, border-color 0.15s ease-out, background-color 0.15s ease-out;
}
.lockedButton:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.lockedButton svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* Pending sign-ups count on the admin's Manage Users button */
.badge {
  display: inline-block;
  min-width: 18px;
  margin-left: 4px;
  padding: 0 5px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  color: var(--surface);
  background: var(--bad-ink);
  border-radius: 9px;
}

/* Header row: the pan name and the "Temp. Controlled by" toggle, centered together
   with a short gap and a thin divider so they read as two separate controls */
.cardHeader {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  padding: 0 0 8px 14px;
}
.cardHeader > h1 {
  flex: 0 1 auto;
  min-width: 0;
}
.tempControlBox {
  /* After the pan name (it comes first in the markup) */
  order: 2;
  flex: none;
  /* Sits toward the top of the card rather than centered on the title */
  align-self: flex-start;
  margin-top: -6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-left: 22px;
  border-left: 1px solid var(--border);
  font-family: "Source Sans Pro", sans-serif;
}
.tempControlLabel {
  font-size: 11px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--ink-2);
}
.tempToggle {
  display: inline-flex;
  vertical-align: middle;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.tempToggle button {
  margin: 0;
  padding: 1px 10px;
  font: 600 12px "Source Sans Pro", sans-serif;
  color: var(--ink-2);
  background: var(--surface);
  border: 0;
  border-radius: 0;
}
.tempToggle button + button {
  border-left: 1px solid var(--border-strong);
}
.tempToggle button[aria-pressed="true"] {
  color: var(--surface);
  background: var(--accent);
}
.tempToggle button:hover:not([aria-pressed="true"]) {
  color: var(--accent);
  background: var(--accent-soft);
}

/* Members-only calculated value for logged-out visitors: a locked box the
   size of the other result fields, linking to log in */
.lockedLabel {
  color: var(--ink-3);
}
.lockedButton.lockedValue {
  box-sizing: border-box;
  justify-content: center;
  width: 80px;
  height: 26px;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

/* Labels with a hover note show a small info icon */
.hasHint {
  cursor: help;
}
.infoIcon {
  width: 14px;
  height: 14px;
  margin-left: 4px;
  vertical-align: -2px;
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.4;
  stroke-linecap: round;
  transition: stroke 0.15s ease-out;
}
.infoIcon .dot {
  fill: var(--ink-3);
  stroke: none;
  transition: fill 0.15s ease-out;
}
.hasHint:hover .infoIcon {
  stroke: var(--accent);
}
.hasHint:hover .infoIcon .dot {
  fill: var(--accent);
}

/* Results waiting on another input (e.g. tablet weight): blank and greyed */
label.needsInput {
  color: var(--ink-3);
  cursor: help;
}
.floaty input.needsInput {
  border-style: dashed;
  border-color: var(--border-strong);
  cursor: help;
}

/* The pan name stays on one line (fitPanTitle shrinks long names) */
.cardHeader > h1 .panChooser {
  white-space: nowrap;
}
.cardHeader > h1.wrapTitle .panChooser {
  white-space: normal;
}

/* mg/mm2 based on an estimated surface area: italic, with an explanation on hover */
#perMm2.estimated {
  font-style: italic;
  cursor: help;
}

/* Suspension preparation card */
.prepDialog {
  /* Centered on screen (the page's margin reset removes the browser default) */
  margin: auto;
  width: min(440px, calc(100vw - 32px));
  /* Scrolls inside itself on short screens; dvh is the height actually
     visible on phones (excluding the browser's address bar) */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  /* Never scroll sideways (the EXAMPLE watermark is wider than the card and
     is clipped instead), and don't scroll the page behind the card */
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 20px 24px 18px;
  font-family: "Source Sans Pro", sans-serif;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px oklch(30% 0.03 250 / 0.2);
}
.prepDialog::backdrop {
  background: oklch(25% 0.02 250 / 0.35);
}
.prepHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  /* Stays at the top while the card scrolls, so the close button is always
     reachable */
  position: sticky;
  top: -20px;
  z-index: 2;
  margin: -20px -24px 12px;
  padding: 14px 24px 10px;
  background: var(--surface);
}
.prepHeader h2 {
  margin: 0;
  font-size: 20px;
  color: var(--ink);
}
.prepClose {
  margin: 0;
  padding: 0 8px;
  font-size: 22px;
  line-height: 1.2;
}
.prepTable {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.prepTable th,
.prepTable td {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.prepTable th {
  text-align: left;
  font-weight: 400;
  color: var(--ink-2);
}
.prepTable td {
  text-align: right;
}
.prepTable .prepTotal th,
.prepTable .prepTotal td {
  font-weight: 600;
  color: var(--ink);
}
.prepTable input {
  width: 56px;
  padding: 2px 6px;
  font: inherit;
  text-align: right;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
}
.prepDialog h3 {
  margin: 16px 0 6px;
  font-size: 15px;
}
.prepList {
  margin: 0;
  padding-left: 18px;
  line-height: 1.5;
}
.prepNote {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ink-2);
}
.prepSteps {
  margin: 0;
  padding-left: 20px;
  line-height: 1.45;
}
.prepSteps li + li {
  margin-top: 6px;
}

/* Logged-out example card: an EXAMPLE watermark across it and a log in prompt */
.prepExample {
  position: relative;
}
/* The watermark sits in a frame the size of the card that clips it, so the
   rotated text never makes the card wider (and scroll sideways) */
.prepWatermark {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.prepWatermark span {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-28deg);
  font-size: 84px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: oklch(50% 0.13 245 / 0.13);
  white-space: nowrap;
}
.prepExampleTag {
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
  color: var(--ink-2);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.prepLogin {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
}
.prepLogin p {
  margin: 0;
  font-size: 14px;
}
.prepLogin a {
  flex-shrink: 0;
}
.prepLogin button {
  white-space: nowrap;
}

/* Logged-out risk teaser: how many risks the current settings have */
.riskTeaser {
  margin: 12px 0 0;
  font: 15px/1.4 "Source Sans Pro", sans-serif;
  color: var(--ink-2);
}
.riskTeaser:empty {
  display: none;
}
.riskTeaser:not([data-count="0"]) {
  color: var(--bad-ink);
  font-weight: 600;
}

/* Logged-out Manage Pans card */
.pansIntro {
  margin: 0 0 4px;
  line-height: 1.45;
}

/* ---- Phones and narrow windows: one column, full-width cards ---- */
@media (max-width: 760px) {
  body {
    padding: 8px 12px 24px;
  }
  .toolbar {
    justify-content: center;
    gap: 6px;
    margin: 0 0 8px;
  }
  .toolbar button {
    padding: 6px 10px;
    font-size: 14px;
  }
  /* Cards stack in page order: parameters, inputs and calculations,
     coating conditions, risks */
  .content,
  .floaty,
  .floaty2 {
    float: none;
    width: auto;
    margin: 12px 0 0;
  }
  .content {
    padding: 10px 14px 12px 4px;
  }
  .floaty {
    padding: 4px 16px 12px;
  }
  .floaty2 {
    padding: 4px 14px 12px;
  }
  .cardHeader {
    gap: 12px;
    padding-left: 10px;
  }
}

/* Sliders on touch screens: dragging the knob moves the slider instead of
   scrolling the page, and the knob has a larger invisible touch area */
.slider1_parent .main_block .groove_parent .rider {
  touch-action: none;
}
.slider1_parent .main_block .groove_parent .rider::after {
  content: "";
  position: absolute;
  inset: -14px;
}

/* Spray gun setup card */
.gunsPickers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 8px;
}
.gunsPickers label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--ink-2);
}
.gunsPickers select {
  height: 30px;
  padding: 0 6px;
  font: 15px "Source Sans Pro", sans-serif;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
}
.gunsBasis {
  margin: 4px 0 8px;
  font-size: 13px;
  color: var(--ink-2);
}
.gunsTable .gunsHead th,
.gunsTable .gunsHead td {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
.gunsTable td {
  padding-left: 8px;
  white-space: nowrap;
}
.gunsTable input {
  width: 60px;
}
.gunsUnit {
  color: var(--ink-3);
}

/* Tablet Details card */
.tdDialog {
  width: min(560px, calc(100vw - 32px));
}
.tdUpload {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ink-2);
  background: var(--surface-sunken);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.tdUpload strong {
  color: var(--ink);
}
.tdUpload input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.tdUpload.tdRead {
  color: var(--ok-ink);
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
}
.tdUpload.tdRead strong {
  color: var(--ok-ink);
}
.tdUpload.tdFailed {
  color: var(--warn-ink);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
}
.tdPdf {
  flex: none;
  width: 28px;
  height: 34px;
}
.tdChoose {
  flex: none;
  margin-left: auto;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.tdTag {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-3);
}
.tdGrid {
  display: grid;
  grid-template-columns: 1fr 90px 1fr 90px;
  gap: 6px 10px;
  align-items: center;
  font-size: 14px;
}
.tdGrid label {
  color: var(--ink-2);
}
.tdGrid .tdBox {
  box-sizing: border-box;
  width: 90px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font: 14px "Source Sans Pro", sans-serif;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
}
.tdGrid .tdMeasure {
  border: 2px solid var(--accent);
  font-weight: 600;
}
.tdGrid .tdCalc {
  background: var(--surface-sunken);
  border-color: var(--border);
}
.tdGrid .tdWide {
  grid-column: 2 / 5;
  width: auto;
  height: auto;
  min-height: 26px;
  justify-content: flex-start;
  padding: 2px 8px;
  text-align: left;
}
.tdHint,
.tdCompare {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ink-2);
}
.tdLogo {
  margin-top: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ink-2);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.tdLogo strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
}
.tdLogo-ok {
  color: var(--ok-ink);
  background: var(--ok-bg);
  border-color: var(--ok-border);
}
.tdLogo-warn {
  color: var(--warn-ink);
  background: var(--warn-bg);
  border-color: var(--warn-border);
}
.tdLogo-bad {
  color: var(--bad-ink);
  background: var(--bad-bg);
  border-color: var(--bad-border);
}
.tdLogo-ok strong,
.tdLogo-warn strong,
.tdLogo-bad strong {
  color: inherit;
}
/* Film / stroke width scale: green to 25%, yellow to 45%, red beyond */
.tdBar {
  position: relative;
  height: 10px;
  margin: 8px 0 4px;
  border-radius: 5px;
  background: linear-gradient(
    to right,
    var(--ok-border) 0 25%,
    var(--warn-border) 25% 45%,
    var(--bad-border) 45% 100%
  );
}
.tdBar[hidden] {
  display: none;
}
.tdBar i {
  position: absolute;
  top: -4px;
  width: 3px;
  height: 18px;
  margin-left: -1.5px;
  background: var(--ink);
}
.tdBarLabels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-2);
}
.tdBarLabels[hidden] {
  display: none;
}
.tdActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.tdActions .tdPrimary {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.tdActions .tdPrimary:disabled {
  opacity: 0.5;
}
@media (max-width: 520px) {
  .tdGrid {
    grid-template-columns: 1fr 90px;
  }
  .tdGrid .tdWide {
    grid-column: 1 / 3;
  }
}

/* Quick tour (logged-out visitors): a pulsing outline on the control and a
   bubble below it with a small animated demo */
.tourRing {
  position: absolute;
  z-index: 50;
  border: 2px solid var(--accent);
  border-radius: 8px;
  pointer-events: none;
  animation: tourPulse 1.6s ease-out infinite;
}
@keyframes tourPulse {
  0% { box-shadow: 0 0 0 0 oklch(50% 0.13 245 / 0.45); }
  70% { box-shadow: 0 0 0 12px oklch(50% 0.13 245 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(50% 0.13 245 / 0); }
}
.tourBubble {
  position: absolute;
  z-index: 51;
  width: min(300px, calc(100vw - 24px));
  padding: 12px 14px 10px;
  font: 14px/1.4 "Source Sans Pro", sans-serif;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px oklch(30% 0.03 250 / 0.22);
}
.tourBubble::before {
  content: "";
  position: absolute;
  top: -7px;
  left: calc(var(--arrow, 50%) - 7px);
  width: 12px;
  height: 12px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.tourBubble strong {
  display: block;
  margin-bottom: 2px;
}
.tourBubble p {
  margin: 0;
  color: var(--ink-2);
}
.tourBubble .tourStep {
  font-size: 12px;
  color: var(--ink-3);
}
.tourActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.tourActions button {
  margin: 0;
  padding: 4px 12px;
  font-size: 13px;
}
.tourActions .tourNext {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
/* Demo of the pan list opening: rows appear one by one, then one is picked */
.tourList {
  margin-top: 8px;
  padding: 4px 0;
  font-size: 13px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  overflow: hidden;
  transform-origin: top;
  animation: tourOpen 3.2s ease-in-out infinite;
}
.tourList div {
  padding: 3px 10px;
}
.tourList div:nth-child(2) {
  animation: tourPick 3.2s ease-in-out infinite;
}
@keyframes tourOpen {
  0%, 8% { transform: scaleY(0); opacity: 0; }
  20%, 85% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}
@keyframes tourPick {
  0%, 40% { background: transparent; color: inherit; }
  50%, 80% { background: var(--accent); color: #fff; }
  100% { background: transparent; color: inherit; }
}
/* Demo of the toggle flipping between Exhaust and Inlet */
.tourToggle {
  position: relative;
  display: inline-flex;
  margin-top: 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font: 600 12px "Source Sans Pro", sans-serif;
}
.tourToggle span {
  position: relative;
  z-index: 1;
  width: 64px;
  padding: 3px 0;
  text-align: center;
  animation: tourInk 3s steps(1) infinite;
}
.tourToggle span + span {
  animation-name: tourInk2;
}
.tourToggle::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 64px;
  background: var(--accent);
  animation: tourSlide 3s ease-in-out infinite;
}
@keyframes tourSlide {
  0%, 40% { transform: translateX(0); }
  50%, 90% { transform: translateX(64px); }
  100% { transform: translateX(0); }
}
@keyframes tourInk {
  0% { color: #fff; }
  45% { color: var(--ink-2); }
  95% { color: #fff; }
}
@keyframes tourInk2 {
  0% { color: var(--ink-2); }
  45% { color: #fff; }
  95% { color: var(--ink-2); }
}
/* Demo of a slider's ranges: specification min to max, normal range shaded */
.tourRange {
  margin: 12px 4px 2px;
}
.tourRangeBar {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
}
.tourRangeBar .tourNormal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 35%;
  width: 35%;
  border-radius: 3px;
  background: var(--ok-border);
  animation: tourGlow 2.4s ease-in-out infinite;
}
.tourRangeBar i {
  position: absolute;
  top: 8px;
  width: 1px;
  height: 7px;
  background: var(--ink-2);
}
.tourRangeLabels {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-2);
}
.tourRangeLabels .tourNormalLabel {
  position: absolute;
  left: 52.5%;
  transform: translateX(-50%);
  font-weight: 600;
  color: var(--ok-ink);
}
@keyframes tourGlow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
/* Demo of what Tablet Details does: three inputs in, results out */
.tourFlow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
}
.tourChip {
  padding: 2px 8px;
  color: var(--ink);
  background: var(--surface-sunken);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}
.tourArrow {
  font-size: 16px;
  color: var(--accent);
  animation: tourNudge 1.6s ease-in-out infinite;
}
.tourOut {
  padding: 2px 8px;
  color: var(--ok-ink);
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
  border-radius: 6px;
}
@keyframes tourNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .tourRing,
  .tourList,
  .tourList div,
  .tourToggle span,
  .tourToggle::before,
  .tourRangeBar .tourNormal,
  .tourArrow {
    animation: none;
  }
}

/* Logged-out Tablet Details: the upload area as it appears to members, with
   a gentle pulse on Choose PDF */
.tdUploadDemo {
  text-decoration: none;
}
.tdUploadDemo:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.tdUploadDemo .tdChoose {
  animation: tourPulse 1.8s ease-out infinite;
}
.tdExampleNote {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink-2);
}
@media (prefers-reduced-motion: reduce) {
  .tdUploadDemo .tdChoose {
    animation: none;
  }
}

/* Rate limit notice */
.slowDown {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 60;
  transform: translateX(-50%);
  padding: 8px 14px;
  font: 14px "Source Sans Pro", sans-serif;
  color: var(--warn-ink);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.slowDown[hidden] {
  display: none;
}

/* Page footer: Terms of Use link */
.siteFooter {
  clear: both;
  padding: 28px 0 8px;
  text-align: center;
  font: 13px "Source Sans Pro", sans-serif;
  color: var(--ink-3);
}
.siteFooter a {
  color: var(--ink-2);
}

/* Coating system and viscosity (Suspension Prep card) */
.csPick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.csPick select,
.csPick input,
.csRow input {
  height: 30px;
  padding: 0 6px;
  font: 15px "Source Sans Pro", sans-serif;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
}
.csPick input {
  width: 130px;
}
.csPick input[hidden] {
  display: none;
}
#csRecipe {
  margin-top: 8px;
}
.csRow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--ink-2);
}
.csRow .csName {
  flex: 1;
  min-width: 0;
}
.csRow .csPct {
  width: 56px;
  text-align: right;
}
.csRow .csRemove {
  margin: 0;
  padding: 0 8px;
  font-size: 18px;
  line-height: 1.3;
}
.csRecipeFoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-2);
}
.csRecipeFoot button {
  margin: 0;
  padding: 3px 10px;
  font-size: 13px;
}
.csRecipeFoot .csOff {
  color: var(--warn-ink);
}
.csResult {
  margin: 10px 0 0;
  font-size: 15px;
}
.csNote {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink-2);
}
.viscBox {
  display: inline-block;
  padding: 1px 8px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-sunken);
}
.visc-ok {
  color: var(--ok-ink);
  background: var(--ok-bg);
  border-color: var(--ok-border);
}
.visc-warn {
  color: var(--warn-ink);
  background: var(--warn-bg);
  border-color: var(--warn-border);
}
.visc-bad {
  color: var(--bad-ink);
  background: var(--bad-bg);
  border-color: var(--bad-border);
}

/* Trademark notice */
.tmNote {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--ink-3);
}


/* Manage Pans card: locked notice */
.pansLocked {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--warn-ink);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
}
.pansLocked svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* Scale-Up card */
.scaleLead {
  margin: 4px 0 6px;
  font-size: 17px;
  font-weight: 600;
  color: var(--accent);
}
.scaleClose {
  margin: 12px 0 0;
  font-weight: 600;
  color: var(--ink);
}

/* Phones: cards sit near the top of the visible screen */
@media (max-width: 760px) {
  .prepDialog {
    margin: max(12px, env(safe-area-inset-top)) auto auto;
  }
}

/* Touch screens (phones, iPads): 16px text in inputs stops iOS from zooming
   in when one is tapped; pinch-zoom still works */
@media (hover: none) and (pointer: coarse) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}