/* ===== MPG.css — Gas Gauge Theme ===== */

/* Theme variables */
:root{
  --bg:#0b0f1a;           /* night dash */
  --panel:#111827;        /* card panel */
  --border:#1f2937;       /* panel border */
  --text:#e5e7eb;         /* main text */
  --muted:#9ca3af;        /* muted text */
  --accent:#22c55e;       /* “fuel” green */
  --warn:#ef4444;         /* “empty” red */
  --needle:#eab308;       /* needle color */
  --glass:#0b1023;        /* input bg */
  --focus:#4f46e5;        /* focus ring */
}

/* Page base */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  background: radial-gradient(1200px 600px at 50% -10%, #141a2b 0%, var(--bg) 45%, #070a12 100%);
  color: var(--text);
  min-height: 100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:2rem 1rem;
}

/* Layout wrapper */
.wrapper{ width:min(960px, 100%); }

/* Title */
h1{
  margin:0 0 1rem 0;
  letter-spacing:.5px;
  text-align:center;
}

/* Card panel */
.card{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Form */
form{
  display:grid;
  gap:.75rem;
  margin-top:1rem;
}
label{
  font-size:.95rem;
  color:var(--muted);
}
input[type="text"],
input[type="number"]{
  width:100%;
  padding:.65rem .75rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--glass);
  color:var(--text);
  outline:none;
}
input:focus{
  border-color:var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent);
}

/* Buttons */
input[type="button"], button{
  padding:.65rem .9rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:#232b46;
  color:var(--text);
  cursor:pointer;
  transition:.15s ease;
}
input[type="button"]:hover, button:hover{
  filter:brightness(1.08);
}
input[type="button"].primary{
  background: linear-gradient(180deg, #2dd4bf, #10b981);
  border-color: #0ea5a3;
  color:#04201c;
  font-weight:600;
}

/* Feedback + results */
#feedback{ color:var(--warn); min-height:1.25rem; margin:.5rem 0; }
#entries, #finalResults{ margin-top:1rem; }

table{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
thead th{
  text-align:left;
  background:#0b1023;
  color:var(--muted);
  padding:.6rem .7rem;
}
tbody td, tfoot td{
  padding:.6rem .7rem;
  border-top:1px solid var(--border);
}
tfoot td{
  font-weight:600;
  background:#0b1023;
}

/* =========================
   GAS GAUGE (semicircle)
   =========================
   HTML example:
   <div class="gauge" style="--needle-rotate: -45deg">
     <div class="gauge-arc"></div>
     <div class="gauge-ticks"></div>
     <div class="gauge-needle"></div>
     <div class="gauge-label left">E</div>
     <div class="gauge-label mid">1/2</div>
     <div class="gauge-label right">F</div>
   </div>
*/

/* Container: semicircle with a “glass” bezel */
.gauge{
  width:min(420px, 92vw);
  aspect-ratio: 2 / 1;              /* semicircle */
  position:relative;
  margin: 0 auto 1rem;
  border-radius: 999px 999px 0 0;
  background:
    radial-gradient(120% 170% at 50% 100%, #0a0f1f 58%, transparent 60%),
    radial-gradient(140% 200% at 50% 100%, #0d1326 58%, transparent 60%),
    linear-gradient(180deg, #0a0f1f, #0a0f1f);
  border: 10px solid #1b243b;
  border-bottom: none;
  box-shadow:
    0 20px 60px rgba(0,0,0,.5) inset,
    0 8px 20px rgba(0,0,0,.35);
  --needle-rotate: -90deg;          /* default: Empty */
}

/* Colored arc (red→yellow→green) */
.gauge-arc{
  position:absolute; inset:0;
  border-radius:inherit;
  --arcPad: 16px;
  -webkit-mask:
    linear-gradient(#000 0 0) top/100% calc(100% + 1px) no-repeat,
    radial-gradient(100% 200% at 50% 100%, transparent 49%, #000 50%) no-repeat;
  mask:
    linear-gradient(#000 0 0) top/100% calc(100% + 1px) no-repeat,
    radial-gradient(100% 200% at 50% 100%, transparent 49%, #000 50%) no-repeat;
  background:
    conic-gradient(from -90deg,
      var(--warn) 0deg 40deg,
      #f59e0b 40deg 75deg,
      var(--accent) 75deg 180deg);
  clip-path: inset(var(--arcPad) var(--arcPad) 50% var(--arcPad) round 999px 999px 0 0);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
}

/* Tick marks */
.gauge-ticks{
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
}
.gauge-ticks::before{
  content:"";
  position:absolute; inset:-35% -35% -65% -35%;
  border-radius:50%;
  background:
    repeating-conic-gradient(from -90deg,
      #cbd5e1 0deg 2deg,
      transparent 2deg 10deg);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%);
  mask: radial-gradient(circle, transparent 56%, #000 57%);
  opacity:.55;
}

/* Needle */
.gauge-needle{
  position:absolute;
  bottom:0; left:50%;
  width:6px; height:48%;
  background: linear-gradient(180deg, #f6e58d, var(--needle));
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(var(--needle-rotate));
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(0,0,0,.45);
}
.gauge-needle::after{
  content:"";
  position:absolute;
  bottom:-10px; left:50%;
  width:22px; height:22px;
  background: radial-gradient(circle at 30% 30%, #fff8, #000a),
              #1f2937;
  border:2px solid #0f172a;
  border-radius:50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 8px rgba(0,0,0,.6);
}

/* Labels: E (left), 1/2 (top), F (right) */
.gauge-label{
  position:absolute;
  bottom:10px;
  font-weight:700;
  color:#cbd5e1;
  text-shadow: 0 1px 2px #000;
}
.gauge-label.left{ left:12px; color: var(--warn); }
.gauge-label.right{ right:12px; color: var(--accent); }
.gauge-label.mid{
  left:50%;
  transform: translateX(-50%);
  bottom: calc(50% - 8px);
  color:#fcd34d;
}

/* Utility spacing if you wrap sections in .card */
.section{ margin: 1rem auto; }

/* Responsive */
@media (min-width: 720px){
  .two-col{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:1rem;
    align-items:start;
  }
}