/* =========================================================================================
   sjMathStyles.css

   🧮 07Feb26 - Unit Convertor (Unit Calculator)
   - Responsive layout (small screens + large screens)
   - De-inline styling: convert repeated inline styles into scoped classes
   - Keeps the converter's visual design while allowing it to scale gracefully
   - Suppresses the debug readout in the bottom-left (p#test)
   ========================================================================================= */

/*
  NOTE:
  - Styles are *scoped* to the Unit Convertor only via the .sj-uc class.
  - Do NOT move these selectors outside .sj-uc, or you'll risk bleeding styles
    into other chapters/sections.
*/

.sj-uc {
  --sjuc-accent: #3399ff;
  --sjuc-header-bg: #e6f3ff;
  --sjuc-border: #e6f3ff;
  --sjuc-muted: lightgrey;
  --sjuc-green: green;
  --sjuc-radius: 3px;

  background-color: white;
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  padding: 4px;
}

.sj-uc,
.sj-uc *,
.sj-uc *::before,
.sj-uc *::after {
  box-sizing: border-box;
}

.sj-uc-form {
  width: 100%;
  margin: 0;
}

/* ---------------------------
   Section title rows (blue bar)
   --------------------------- */

.sj-uc-titleRow {
  background-color: var(--sjuc-header-bg);
  padding: 3px;
  min-height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}

.sj-uc-titleSlot {
  flex: 0 0 10%;
  min-width: 30px; /* keeps the left/right placeholders stable on tiny screens */
  display: flex;
  align-items: center;
  justify-content: center;
}

.sj-uc-titleMid {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sj-uc-titleText {
  font-size: clamp(12px, 5vw, 24px);
  font-weight: bold;
  color: var(--sjuc-accent);
}

/* ---------------------------
   General bordered rows
   --------------------------- */

.sj-uc-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 1px auto;
  padding: 3px;
  border: 1px solid var(--sjuc-border);
  border-radius: var(--sjuc-radius);
  gap: 10px;
}

.sj-uc-cell {
  flex: 1 1 210px;
  min-width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

@media (max-width: 420px) {
  .sj-uc-cell {
    flex-basis: 160px;
    min-width: 150px;
  }
}

/* ---------------------------
   Inputs & selects
   --------------------------- */

.sj-uc-select {
  color: var(--sjuc-green);
  font-weight: bold;
  text-align: center;
  width: min(100%, 12rem);
  height: 30px;
  border-radius: 5px;
  border: 1px solid black;
  background-color: white;
  font-size: clamp(9px, 2.5vw, 16px);
}

.sj-uc-input {
  text-align: center;
  height: 30px;
  border-radius: 3px;
  width: min(100%, 12rem);
  padding: 3px;
  font-size: clamp(14px, 2.5vw, 16px);
}

/* xPerCup special behavior: grey for predefined ingredients, white for CUSTOM */
.sj-uc-input--xPerCup {
  background-color: lightgray;
  border: 1px solid #000;
}

.sj-uc-input--xPerCup.sj-uc-isCustom {
  background-color: white;
}

.sj-uc-unit {
  font-size: 12px;
  min-width: 52px;
  margin-left: 5px;
}

/* ---------------------------
   Panel blocks (Metric / Imperial / Volume)
   --------------------------- */

.sj-uc-panel {
  text-align: center;
  margin: 3px;
  border: 1px solid var(--sjuc-border);
  border-radius: var(--sjuc-radius);
  padding: 1px;
}

.sj-uc-grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  justify-items: center;
}

.sj-uc-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
}

.sj-uc-panelTitle {
  font-size: 16px;
  min-height: 25px;
}

.sj-uc-panelTitle--volume {
  min-height: 30px;
  padding: 3px;
}

.sj-uc-panelFields {
  padding: 3px;
  min-height: 40px;
}

.sj-uc-field {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Panel inputs (kilos/grams/pounds/ounces) were intentionally smaller in the original */
.sj-uc-panel .sj-uc-input {
  font-size: 16px;
  width: min(70%, 140px);
}

.sj-uc-summary {
  font-size: 70%;
  font-weight: bold;
  color: var(--sjuc-muted);
  text-align: center;
  margin: 5px;
}

/* ---------------------------
   Volume input row
   --------------------------- */

.sj-uc-panelTitle--volume {
  /* 🧩 15Feb26 - Volume labels are now paired with each box (sj-uc-volLabel),
     so this shared header row is hidden to prevent drift when boxes wrap. */
  display: none;
}

.sj-uc-volumeFields {
  /* 🧩 15Feb26 - Grid keeps each label + box together on every screen size */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  align-items: start;
  justify-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 3px;
}

.sj-uc-volField {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.sj-uc-volLabel {
  font-size: 16px;
  min-height: 25px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sj-uc-volBox {
  width: min(100%, 12.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid black;
  border-radius: 3px;
  padding: 2px;
  gap: 6px;
}
/* The old HTML had <br> nodes inside a flex container; hide them so wrapping is clean */
.sj-uc-volumeFields br {
  display: none;
}

.sj-uc-inputGreen {
  color: var(--sjuc-green);
  font-size: clamp(16px, 5vw, 22px);
  font-weight: bold;
  text-align: right;
  border: none;
  width: 3.8rem;
  background: transparent;
}

.sj-uc-selectGreen {
  color: var(--sjuc-green);
  font-size: clamp(16px, 5vw, 22px);
  font-weight: bold;
  text-align: left;
  border: none;
  background: transparent;
}

/* ---------------------------
   Menu bar + buttons
   --------------------------- */

.sj-uc-menu {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--sjuc-accent);
  border: 1px solid var(--sjuc-border);
  border-radius: var(--sjuc-radius);
  background-color: white;
  margin: 5px;
  padding: 5px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.sj-uc-btn {
  display: block;
  padding: 5px;
  width: auto;
  height: 35px;
  font-weight: bold;
  margin: 0 auto;
}

/* Default button visibility (JS will override as needed) */
#RefreshButtonDisplay {
  display: none;
}

.sj-uc-residual {
  font-size: 70%;
  font-weight: bold;
  color: var(--sjuc-muted);
  text-align: center;
  margin: 5px;
}

/* ---------------------------
   Debug suppression
   --------------------------- */

.sj-uc-debug {
  display: none !important;
}