/* E6B Calculator — Professional UI */
:root{
  --bg: #ffffff;
  --panel: #ffffff;
  --ink: #0f172a;
  --ink-weak:#475569;
  --muted:#64748b;
  --line:#e2e8f0;
  --accent:#0ea5e9;
  --accent-2:#2563eb;
  --good:#14b8a6;
  --warn:#ef4444;
  --shadow: 0 2px 10px rgba(2,6,23,.06), 0 1px 1px rgba(2,6,23,.04);
  --radius: 16px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1220;
    --panel:#0f172a;
    --ink:#e5e7eb;
    --ink-weak:#cbd5e1;
    --muted:#a1a1aa;
    --line:#1f2937;
    --shadow: 0 2px 10px rgba(0,0,0,.4);
  }
}

.e6b-wrap{
  color:var(--ink);
  background: var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.5;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

.e6b-header{
  display:flex; gap:12px; align-items:center; margin: 4px 0 16px;
}
.e6b-header h2{ font-size: clamp(22px, 3vw, 28px); margin:0; font-weight: 800; letter-spacing:.2px; }
.e6b-header svg{ filter: drop-shadow(0 2px 4px rgba(14,165,233,.2)); }

.e6b-tabs{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;
  border-bottom:1px solid var(--line); padding-bottom:8px;
}
.tab-btn{
  appearance:none; border:0; background:transparent; color:var(--ink-weak);
  padding:10px 12px; border-radius:10px; font-weight:700; cursor:pointer;
  position:relative;
}
.tab-btn:hover{ color:var(--ink); background:color-mix(in oklab, var(--accent) 12%, transparent); }
.tab-btn[aria-selected="true"]{
  color:var(--ink);
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.tab-btn:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

.panel{ display:none; }
.panel.active{ display:block; }

.grid.two{
  display:grid; gap:16px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 920px){ .grid.two{ grid-template-columns: 1fr; } }

.card{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
}
.card h3{
  margin:0 0 12px; font-size: clamp(16px,2.2vw,18px); font-weight:800;
}

.form{
  display:grid; gap:10px; grid-template-columns: repeat(2, minmax(0,1fr));
  margin-bottom: 10px;
}
.form.three{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 680px){
  .form, .form.three{ grid-template-columns: 1fr; }
}

.form label{
  display:grid; gap:6px; font-size:13px; color: var(--muted);
}
.form input, .form select{
  width:100%;
  background: var(--bg);
  color: var(--ink);
  border:1px solid var(--line);
  border-radius: 12px;
  padding:10px 12px;
  font-size:14px;
  box-shadow: inset 0 -1px 0 rgba(2,6,23,.05);
}
.form input:focus, .form select:focus{
  outline: none; border-color: color-mix(in oklab, var(--accent) 40%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent);
}

.results{
  display:grid; gap:8px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width:680px){ .results{ grid-template-columns: 1fr; } }
.results div{
  display:flex; align-items:center; justify-content:space-between;
  background: color-mix(in oklab, var(--panel) 70%, var(--bg));
  border:1px dashed var(--line); border-radius: 12px; padding:10px 12px;
}
.results span{ color:var(--muted); font-size:12px; }
.results b{ font-size:16px; letter-spacing:.2px; }
.results em{ font-style:normal; color: var(--ink-weak); margin-left:4px; }

canvas#windCanvas{ width:100%; max-width:560px; height:auto; display:block; margin-inline:auto; background: radial-gradient(120% 120% at 50% -10%, rgba(14,165,233,.12), transparent 60%); border-radius: 16px; }

/* Utilities */
.muted{ color: var(--muted); }
.small{ font-size: 12px; }

/* Better number input UI on mobile */
input[type=number]{
  -moz-appearance: textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }





/* GPS styles */
.gps-block{margin:18px 0;padding:10px 12px;border:1px solid #e5e7eb;border-radius:8px;background:#fff}
.gps-block h4{margin-top:0}
.gps-block .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gps-block .row label{min-width:60px}
.gps-block input[type=number]{width:120px}
.gps-block .hemi{display:inline-flex;border:1px solid #cbd5e1;border-radius:6px;overflow:hidden;margin-left:6px}
.gps-block .hemi button{border:0;background:#e5f3f7;padding:6px 12px;cursor:pointer}
.gps-block .hemi button.active{background:#10a2c3;color:#fff}

/* Force flat always */
.e6b-flat .panel{display:block!important}
.e6b-flat .e6b-tabs{display:none!important}


/* === HP Boxes Look (imported) === */
.e6b-row label{font-weight:600;}
.e6b-input input,
.e6b-input select{
  width:120px;
  max-width:100%;
  padding:6px 8px;
  height:32px;
  border:1px solid #d0d7de;
  border-radius:6px;
  font-size:14px;
  line-height:1.25;
}
.e6b-input input:focus,
.e6b-input select:focus{
  border-color:#61b3e6;
  box-shadow:0 0 0 0.15rem rgba(97,179,230,.25);
  outline:0;
}
/* Keep unit affix tidy with new input height */
.e6b-input.affix .affix-item{
  right:8px;
  top:50%;
  transform:translateY(-50%);
  font-size:12px;
  color:#667085;
}
/* Show number spinners on desktop browsers */
input[type=number]{appearance:auto;-moz-appearance:number-input;}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{opacity:1}
/* Reduce desktop box width overall */
@media(min-width:1024px){
  .e6b-input input, .e6b-input select{width:120px}
}


/* === Compact desktop boxes: fixed width, 5px padding, visible spinners === */
@media (min-width: 992px){
  .e6b-wrap .e6b-input{display:inline-flex; align-items:center}
  .e6b-wrap .e6b-input input,
  .e6b-wrap .e6b-input select{
    width:110px !important;
    max-width:110px !important;
    flex:0 0 110px;
    padding:5px 7px !important;
    height:32px !important;
    box-sizing:border-box;
    border:1px solid #d0d7de !important;
    border-radius:6px !important;
    line-height:1.2;
  }
  .e6b-wrap .e6b-input.affix .affix-item{
    right:8px; top:50%; transform:translateY(-50%); font-size:12px; color:#667085;
  }
  /* Keep labels tidy next to smaller fields */
  .e6b-wrap .e6b-row label{margin-right:6px; font-weight:600}
}
/* Show native number spinners and align them inside the box */
.e6b-wrap input[type=number]{-webkit-appearance:auto; appearance:auto; -moz-appearance:number-input}
.e6b-wrap input[type=number]::-webkit-outer-spin-button,
.e6b-wrap input[type=number]::-webkit-inner-spin-button{ margin:0 }


/* === Compact, spaced boxes + hover/focus spinners (t2) === */
.e6b-wrap .e6b-row{
  gap: 12px 18px; /* row gap, column gap */
}
@media (min-width: 992px){
  .e6b-wrap .e6b-input{display:inline-flex; align-items:center; margin-right:6px;}
  .e6b-wrap .e6b-input input,
  .e6b-wrap .e6b-input select{
    width:96px !important;
    max-width:96px !important;
    flex:0 0 96px;
    padding:5px 6px !important;
    height:30px !important;
    font-size:14px;
    border:1px solid #d0d7de !important;
    border-radius:6px !important;
    box-sizing:border-box;
  }
  .e6b-wrap .e6b-input.affix .affix-item{
    right:6px; top:50%; transform:translateY(-50%); font-size:12px; color:#667085;
  }
  .e6b-wrap .e6b-row label{margin-right:8px; font-weight:600}
}

/* Spinners hidden by default, show on hover/focus — WebKit */
.e6b-wrap input[type=number]::-webkit-outer-spin-button,
.e6b-wrap input[type=number]::-webkit-inner-spin-button{ opacity:0; transition:opacity .12s ease; }
.e6b-wrap input[type=number]:hover::-webkit-outer-spin-button,
.e6b-wrap input[type=number]:hover::-webkit-inner-spin-button,
.e6b-wrap input[type=number]:focus::-webkit-outer-spin-button,
.e6b-wrap input[type=number]:focus::-webkit-inner-spin-button{ opacity:1; }

/* Firefox: switch appearance on hover/focus to show spinners */
.e6b-wrap input[type=number]{ -moz-appearance: textfield; }
.e6b-wrap input[type=number]:hover,
.e6b-wrap input[type=number]:focus{ -moz-appearance: number-input; }


/* Fuel type select width to match inputs */
#vol-fueltype-row .e6b-input select{
  width: 140px;
  max-width: 100%;
  height: 30px;
  padding: 5px 6px;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  box-sizing: border-box;
}