/* ============================================================
   Utilities Bunker — Temperature Converter v2.1
   File: /assets/css/modules/convert/temperature-converter.v2.1.css
   Purpose:
   - Tool-only layout and visuals for temperature-converter.php
   - Mobile-first, UB-CERT aligned, no shared toolkit edits
   - 44x44 touch targets, clean results grid, rail support
   ============================================================ */

:root{
  --temp-radius: 16px;
  --temp-gap: 14px;
  --temp-soft: rgba(0,0,0,.06);
  --temp-accent-soft: rgba(249,58,19,.10);
  --temp-accent-mid: rgba(249,58,19,.18);
  --temp-cold: #0ea5e9;
  --temp-warm: #f59e0b;
  --temp-hot: #f93a13;
}

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */
.temp-heading{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}

.temp-title{
  margin:0;
  font-size:var(--ub-fs-5);
}

.temp-subtitle{
  margin:6px 0 0;
  max-width:76ch;
}

/* ------------------------------------------------------------
   How-to list
   ------------------------------------------------------------ */
.temp-steps{
  margin:0;
  padding-left:18px;
}

.temp-steps li{
  margin:0 0 8px;
}

.temp-steps li:last-child{
  margin-bottom:0;
}

/* ------------------------------------------------------------
   Hero layout
   ------------------------------------------------------------ */
.temp-hero{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:var(--temp-gap);
  align-items:start;
}

@media (max-width: 980px){
  .temp-hero{
    grid-template-columns:1fr;
  }
}

/* ------------------------------------------------------------
   Panels
   ------------------------------------------------------------ */
.temp-panel{
  background:var(--ub-surface-2);
  border:1px solid var(--ub-border);
  border-radius:var(--temp-radius);
  padding:12px;
}

.temp-panel-head{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  margin-bottom:10px;
}

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

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

.temp-live-badge{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border:1px solid var(--ub-border);
  border-radius:999px;
  background:var(--ub-card-bg);
  font-size:12px;
  font-weight:950;
  white-space:nowrap;
}

/* ------------------------------------------------------------
   Form / actions
   ------------------------------------------------------------ */
.temp-form{
  display:block;
}

.temp-actions{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* ------------------------------------------------------------
   Quick reference KPI cards
   ------------------------------------------------------------ */
.temp-kpi-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:12px;
}

.temp-kpi{
  min-height:92px;
  border:1px solid var(--ub-border);
  border-radius:14px;
  background:var(--ub-card-bg);
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

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

.temp-kpi .v{
  margin-top:6px;
  font-family:var(--ub-mono);
  font-size:13px;
  font-weight:950;
  line-height:1.35;
  overflow-wrap:anywhere;
}

@media (max-width: 560px){
  .temp-kpi-grid{
    grid-template-columns:1fr;
  }
}

/* ------------------------------------------------------------
   Results section
   ------------------------------------------------------------ */
.temp-results{
  margin-top:14px;
}

.temp-results-head{
  display:flex;
  gap:10px;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.temp-results-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

@media (min-width: 900px){
  .temp-results-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 560px){
  .temp-results-grid{
    grid-template-columns:1fr;
  }
}

.temp-result-card{
  position:relative;
  min-height:128px;
  border:1px solid var(--ub-border);
  border-radius:16px;
  background:
    linear-gradient(180deg, var(--ub-card-bg), var(--ub-surface-2));
  padding:14px;
  box-shadow:var(--ub-shadow);
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

.temp-result-card h3{
  margin:0;
  font-size:13px;
  font-weight:950;
  letter-spacing:.02em;
}

.temp-result-value{
  margin-top:14px;
  font-family:var(--ub-mono);
  font-size:clamp(18px, 1.1rem + .7vw, 24px);
  font-weight:950;
  line-height:1.2;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.temp-result-meta{
  margin-top:8px;
  color:var(--ub-muted);
  font-size:12px;
  font-weight:800;
}

.temp-result-card.is-source{
  border-color:rgba(249,58,19,.55);
  box-shadow:0 0 0 4px rgba(249,58,19,.12), var(--ub-shadow);
  background:
    linear-gradient(180deg, rgba(249,58,19,.08), var(--ub-card-bg));
}

@media (hover:hover){
  .temp-result-card:hover{
    transform:translateY(-2px);
    border-color:rgba(249,58,19,.30);
  }
}

/* ------------------------------------------------------------
   Details / reference
   ------------------------------------------------------------ */
.temp-reference-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

@media (max-width: 820px){
  .temp-reference-grid{
    grid-template-columns:1fr;
  }
}

.temp-mini-title{
  margin:0 0 8px;
  font-size:14px;
  font-weight:950;
}

.temp-mini-text{
  margin:0;
  color:var(--ub-text);
  font-size:14px;
  line-height:1.55;
}

.temp-formula-list{
  margin:0;
  padding-left:18px;
}

.temp-formula-list li{
  margin:0 0 8px;
  overflow-wrap:anywhere;
}

.temp-formula-list li:last-child{
  margin-bottom:0;
}

.temp-formula-list code{
  font-family:var(--ub-mono);
  font-size:13px;
  background:var(--ub-surface-3);
  border:1px solid var(--ub-border);
  border-radius:10px;
  padding:2px 6px;
}

.temp-workbox{
  margin-top:14px;
  padding:12px;
  border:1px solid var(--ub-border);
  border-radius:14px;
  background:var(--ub-surface-1);
  font-family:var(--ub-mono);
  font-size:13px;
  line-height:1.6;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

/* ------------------------------------------------------------
   FAQ
   ------------------------------------------------------------ */
.temp-faq-q{
  margin:12px 0 6px;
  font-size:15px;
  font-weight:950;
}

.temp-faq-a{
  margin:0 0 10px;
}

.temp-faq-a:last-child{
  margin-bottom:0;
}

/* ------------------------------------------------------------
   Right rail supported scales
   ------------------------------------------------------------ */
.temp-scale-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:12px;
}

/* ------------------------------------------------------------
   Utility polish
   ------------------------------------------------------------ */
#tempValueError{
  min-height:16px;
}

#tempResultNote{
  margin-top:10px;
}

#tempWorkBox:empty::before{
  content:"Conversion details and formula notes will appear here.";
  color:var(--ub-muted);
}

/* ------------------------------------------------------------
   Theme-aware visual tuning
   ------------------------------------------------------------ */
html.ub-theme-dark .temp-result-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03));
}

html.ub-theme-dark .temp-result-card.is-source{
  background:
    linear-gradient(180deg, rgba(249,58,19,.14), rgba(255,255,255,.03));
}

html.ub-theme-dark .temp-formula-list code{
  background:rgba(255,255,255,.05);
}

/* ------------------------------------------------------------
   Touch targets / accessibility
   ------------------------------------------------------------ */
#tempSwapBtn,
#tempResetBtn,
#btnCopy,
#btnShare,
#ubThemeToggle{
  min-height:44px;
}

.temp-result-card:focus-within{
  box-shadow:0 0 0 4px var(--ub-focus), var(--ub-shadow);
}

/* ------------------------------------------------------------
   Narrow mobile polish
   ------------------------------------------------------------ */
@media (max-width: 420px){
  .temp-panel,
  .temp-result-card{
    padding:12px;
  }

  .temp-result-value{
    font-size:20px;
  }

  .temp-scale-list{
    gap:8px;
  }
}