/* ============================================================
 * Utilities Bunker — Thermistor Resistance vs Temperature (v2.1)
 * File: /assets/css/modules/electronics/thermistor.v2.1.css
 * Purpose:
 * - Tool-only layout + thermistor lab visuals + table + chart preview
 * - No changes to ub-toolkit.v2.1.css
 * - Mobile-first, clamp(), 44x44 touch targets
 * ============================================================ */

/* ============================== Local tokens (tool-scoped) ============================== */
:root{
  --th-radius: 16px;
  --th-gap: 14px;
  --th-soft: rgba(0,0,0,.06);
}

/* ============================== Hero layout ============================== */
.ub-hero{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--th-gap);
}

/* Stack on tablet/mobile */
@media (max-width: 980px){
  .ub-hero{
    grid-template-columns: 1fr;
  }
}

/* ============================== Thermistor Lab panel ============================== */
.th-lab{
  background: var(--ub-surface-2);
  border: 1px solid var(--ub-border);
  border-radius: var(--th-radius);
  padding: 12px;
}

.th-lab-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 10px;
  flex-wrap:wrap;
  margin-bottom: 8px;
}

.th-lab-title{
  font-size: clamp(13px, 1.2vw, 14px);
  font-weight: 950;
  letter-spacing: .01em;
}

.th-lab-sub{
  font-size: 12px;
  color: var(--ub-muted);
  margin-top: 2px;
}

/* ============================== KPI tiles ============================== */
.th-kpis{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  justify-content:flex-end;
}

.th-kpi{
  min-width: 120px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--ub-border);
  background: var(--ub-card-bg);
}

.th-kpi .k{
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ub-muted);
}

.th-kpi .v{
  font-family: var(--ub-mono);
  font-weight: 950;
  font-size: 14px;
  margin-top: 2px;
}

/* ============================== Type pill (NTC/PTC) ============================== */
.th-type{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--ub-border);
  background: var(--ub-card-bg);
  font-size: 12px;
  font-weight: 950;
  min-height: 44px;
}

.th-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ub-muted);
}

/* ============================== Mode / Model chips ============================== */
.th-wheel{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-top: 10px;
}

.th-wheel .ub-chip{
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--ub-border);
  background: var(--ub-chip-bg);
  color: var(--ub-chip-text);
  font-weight: 900;
  cursor: pointer;
  user-select:none;
}

.th-wheel .ub-chip:hover{
  background: var(--ub-chip-hover);
}

.th-wheel .ub-chip[aria-pressed="true"]{
  border-color: rgba(249,58,19,.55);
  box-shadow: 0 0 0 4px rgba(249,58,19,.12);
}

/* Accessible focus ring for chips */
.th-wheel .ub-chip:focus{
  outline: none;
  box-shadow: 0 0 0 4px var(--ub-focus);
  border-radius: 999px;
}

/* ============================== Chart preview ============================== */
.th-chart{
  width: 100%;
  height: auto;
  margin-top: 10px;
  display:block;
  border-radius: 14px;
}

.th-chart-frame{
  fill: rgba(0,0,0,.02);
  stroke: rgba(0,0,0,.10);
}

html.ub-theme-dark .th-chart-frame{
  fill: rgba(255,255,255,.03);
  stroke: rgba(255,255,255,.10);
}

.th-chart-line{
  fill: none;
  stroke: rgba(249,58,19,.60);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.ub-theme-dark .th-chart-line{
  stroke: rgba(249,58,19,.70);
}

.th-chart-dot{
  fill: rgba(249,58,19,.85);
  stroke: rgba(0,0,0,.22);
  stroke-width: 2;
}

html.ub-theme-dark .th-chart-dot{
  stroke: rgba(255,255,255,.18);
}

.th-chart-grid{
  stroke: rgba(0,0,0,.08);
  stroke-width: 1;
}

html.ub-theme-dark .th-chart-grid{
  stroke: rgba(255,255,255,.08);
}

.th-chart-hud{
  font-family: var(--ub-mono);
  font-size: 12px;
  fill: rgba(0,0,0,.62);
}

html.ub-theme-dark .th-chart-hud{
  fill: rgba(255,255,255,.70);
}

/* ============================== Presets row ============================== */
.th-preset-row{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 10px;
}

.th-preset-row .ub-chip{
  min-height: 44px;
  padding: 10px 12px;
}

/* ============================== Inputs / sections ============================== */
.hint{
  margin-top: 6px;
  font-size: 12px;
  color: var(--ub-muted);
}

.ub-inline-error{
  margin-top: 6px;
  font-size: 12px;
  color: var(--ub-danger);
  font-weight: 800;
  min-height: 16px; /* stable layout */
}

/* Provide a little visual grouping for model settings inside the form */
.th-subcard{
  border: 1px dashed var(--ub-border);
  border-radius: 14px;
  padding: 12px;
  background: var(--ub-surface-2);
}

.th-subcard-title{
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ub-muted);
}

.th-subcard-note{
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--ub-muted);
}

/* Two-column inside subcard, stacks on small screens */
.th-subgrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 768px){
  .th-subgrid{
    grid-template-columns: 1fr;
  }
}

/* ============================== Output / Work area ============================== */
.th-work{
  font-family: var(--ub-mono);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap:anywhere;
}

/* Details styling enhancement */
.ub-collapsible summary{
  cursor:pointer;
  font-weight: 950;
  min-height: 44px;
  display:flex;
  align-items:center;
}

.ub-collapsible summary:focus{
  outline: none;
  box-shadow: 0 0 0 4px var(--ub-focus);
  border-radius: 12px;
}

/* ============================== Table ============================== */
.th-table-wrap{
  overflow:auto;
  border-radius: var(--ub-radius-2);
}

.th-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--ub-border);
  border-radius: var(--ub-radius-2);
  overflow:hidden;
  background: var(--ub-card-bg);
  min-width: 520px;
}

.th-table th,
.th-table td{
  padding:10px 12px;
  border-bottom:1px solid var(--ub-border);
  text-align:left;
  font-size: var(--ub-fs-1);
}

.th-table th{
  background: var(--ub-surface-2);
  font-weight: 950;
}

.th-table tr:last-child td{
  border-bottom:0;
}

/* sticky header for long tables (works in modern browsers) */
.th-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
}

/* ============================== Rail helper ============================== */
.ub-btn--block{
  width:100%;
}

/* ============================== Small screens polish ============================== */
@media (max-width: 520px){
  .th-kpi{
    min-width: 108px;
  }
}
/* ============================================================
   Compatibility aliases (PHP uses ub-therm-* classnames)
   Maps ub-therm-* markup to the th-* styles in this CSS.
   ============================================================ */

/* Lab container + top row */
.ub-therm-lab{ background: var(--ub-surface-2); border: 1px solid var(--ub-border); border-radius: var(--th-radius); padding: 12px; }
.ub-therm-top{ display:flex; justify-content:space-between; align-items:flex-start; gap: 10px; flex-wrap:wrap; margin-bottom: 8px; }
.ub-therm-title{ font-size: clamp(13px, 1.2vw, 14px); font-weight: 950; letter-spacing: .01em; }
.ub-therm-sub{ font-size: 12px; color: var(--ub-muted); margin-top: 2px; }

/* KPI tiles */
.ub-therm-kpis{ display:flex; flex-wrap:wrap; gap: 8px; justify-content:flex-end; }
.ub-therm-kpi{ min-width: 120px; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--ub-border); background: var(--ub-card-bg); }
.ub-therm-kpi .k{ font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: var(--ub-muted); }
.ub-therm-kpi .v{ font-family: var(--ub-mono); font-weight: 950; font-size: 14px; margin-top: 2px; }

/* Type pill */
.ub-therm-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--ub-border);
  background: var(--ub-card-bg);
  font-size: 12px;
  font-weight: 950;
  min-height: 44px;
}

/* NOTE: you're using .ub-dot already (toolkit has .ub-dot in Ohm’s Law CSS);
   keep it, but ensure it's visible in this tool too. */
.ub-dot{ width: 10px; height: 10px; border-radius: 50%; background: var(--ub-muted); }

/* Solve direction chips container */
.ub-therm-wheel{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-top: 10px;
}

/* Chart */
.ub-therm-chart{
  width: 100%;
  height: auto;
  margin-top: 10px;
  display:block;
  border-radius: 14px;
}

/* Optional: soften your chart grid in dark mode (your SVG uses inline stroke; this helps when not inline) */
html.ub-theme-dark .ub-therm-chart g#chartGrid{ opacity: .9; }

/* Presets row */
.ub-therm-preset-row{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 10px;
}
.ub-therm-preset-row .ub-chip{ min-height: 44px; padding: 10px 12px; }

/* Small screens */
@media (max-width: 520px){
  .ub-therm-kpi{ min-width: 108px; }
}
/* ============================================================
   Controls panel styling (ub-therm-* markup)
   Makes model bar, options bar, and table bar look like a
   deliberate, uniform module (Ohm’s Law style).
   ============================================================ */

/* Model selection bar (Beta vs SH) */
.ub-therm-modelbar{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin: 10px 0 12px;
}

.ub-therm-modelbar .ub-chip{
  min-height: 44px;
  padding: 10px 14px;
}

/* Optional: stronger active state (matches chip pressed look) */
.ub-therm-modelbar .ub-chip[aria-pressed="true"]{
  border-color: rgba(249,58,19,.55);
  box-shadow: 0 0 0 4px rgba(249,58,19,.12);
}

/* Options row (Assume NTC, Auto-scale, Solve Mode) */
.ub-therm-options{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  margin: 10px 0 12px;
}

/* Ensure selects look consistent inside chip styling */
.ub-therm-options select.ub-chip{
  padding-right: 16px;
}

/* Table settings bar (Tmin/Tmax/Step) */
.ub-therm-tablebar{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  border: 1px dashed var(--ub-border);
  border-radius: 14px;
  background: var(--ub-surface-2);
}

/* Stack table controls on small screens */
@media (max-width: 768px){
  .ub-therm-tablebar{
    grid-template-columns: 1fr;
  }
}

/* Keep labels compact in this bar without breaking toolkit */
.ub-therm-tablebar .ub-field label{
  font-size: var(--ub-fs-1);
}

/* Make sure the inputs are full width in the table bar */
.ub-therm-tablebar .ub-field input{
  width:100%;
}

/* Hide/show parameter blocks cleanly when model switches.
   JS should toggle [hidden] on elements with data-beta/data-sh. */
[data-beta][hidden],
[data-sh][hidden]{
  display:none !important;
}