/* Composter + furnace fuel calculators.
 *
 * #cfc-scoped throughout. css/tool-theme.css loads after this file and wins ties, so three of
 * its rules decide the class names here rather than the other way round:
 *
 *   - `button:not(.btn):not([class*="tab"])` is (1,2,1) and paints every button with a 28px
 *     floor. Every toggle here carries "tab" in its class, which is what exempts it, and the
 *     tab rule then gives the selected one the site's green state via `.active`.
 *   - `[class*="tab"]`, `[class*="chip"]`, `[class*="pill"]` also match CONTAINERS, so the
 *     wrappers are named -nav and -seg, not -tabs or -chips.
 *   - `[class*="result"]`, `[class*="output"]`, `[class*="-out"]` switch to monospace with a
 *     border, so nothing here is called a result.
 */

#cfc { display: block; }
#cfc [hidden] { display: none !important; }

#cfc .cfc-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
#cfc .cfc-tab,
#cfc .cfc-seg-tab {
  padding: 7px 13px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}
#cfc .cfc-seg-tab { font-size: 13px; padding: 6px 11px; }
#cfc .cfc-seg { display: flex; flex-wrap: wrap; gap: 6px; }

#cfc .cfc-loading { margin: 0 0 16px; font-size: 14px; opacity: .75; }

#cfc .cfc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
  align-items: start;
}
#cfc .cfc-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
#cfc .cfc-field { display: block; min-width: 0; }
#cfc .cfc-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
}
#cfc input[type="number"],
#cfc input[type="search"] { width: 100%; padding: 9px 11px; font-size: 15px; }
#cfc .cfc-hint { margin: 0; font-size: 13px; line-height: 1.55; }

/* The selected item ------------------------------------------------------- */
#cfc .cfc-pick {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
#cfc .cfc-pick .mc-sprite { transform: scale(2.25); margin: 4px 16px 4px 12px; }
#cfc .cfc-pickname { display: block; font-size: 18px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
#cfc .cfc-picksub { display: block; margin-top: 2px; font-size: 13px; opacity: .75; }

/* Stat tiles -------------------------------------------------------------- */
/* Two fixed columns: four tiles make a square, and an auto-fit grid left the fourth one alone
 * on a second row with "22 × 64 + 27" wrapped over three lines. */
#cfc .cfc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#cfc .cfc-stat { min-width: 0; padding: 11px 13px; border-radius: 10px; background: rgba(127, 127, 127, .10); }
#cfc .cfc-statlabel {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .72;
}
#cfc .cfc-statvalue { display: block; margin-top: 3px; font-size: 20px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
#cfc .cfc-statsub { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.4; opacity: .68; }

/* The worked arithmetic, so a number on screen can be checked by hand. */
#cfc .cfc-math {
  margin: 0;
  padding: 9px 12px;
  border-left: 3px solid var(--grass, #10b981);
  font-size: 13.5px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* The list ---------------------------------------------------------------- */
#cfc .cfc-listhead { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 24px 0 10px; }
#cfc .cfc-listhead input[type="search"] { flex: 1 1 240px; width: auto; min-width: 0; }

/* A table cannot shrink below its columns, so its wrapper scrolls instead of the page. */
#cfc .cfc-tablewrap { overflow-x: auto; }
#cfc .cfc-table { width: 100%; font-size: 14px; }
#cfc .cfc-table th,
#cfc .cfc-table td { padding: 8px 10px; white-space: nowrap; vertical-align: middle; }
#cfc .cfc-table .cfc-num { text-align: right; font-variant-numeric: tabular-nums; }
#cfc .cfc-table tbody tr { cursor: pointer; }
#cfc .cfc-table tbody tr.cfc-sel td { background: rgba(16, 185, 129, .13); }
#cfc .cfc-table td.cfc-itemcell { white-space: normal; min-width: 180px; }
#cfc .cfc-itemname { font-weight: 700; }
#cfc .cfc-members { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; opacity: .75; white-space: normal; }
#cfc .cfc-members .mc-sprite { margin: -4px 6px -4px 3px; }
#cfc .cfc-tier { font-weight: 800; }
#cfc .cfc-count { margin: 8px 0 0; font-size: 12.5px; opacity: .7; }

#cfc .cfc-help { margin-top: 26px; max-width: 76ch; font-size: 14.5px; line-height: 1.65; }
#cfc .cfc-help p { margin: 0 0 12px; }