* { box-sizing: border-box; }
body { font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #f7f9fb; color: #333; margin: 0; padding: 0; transition: background-color 0.3s, color 0.3s; }
.header { text-align: center; padding: 20px 0 10px; }
.logo { height: 68px; display: inline-block; }
.mode-toggle { display: flex; justify-content: center; align-items: center; margin: 30px 0; }
.container { max-width: 500px; margin: auto; background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.08); transition: background-color 0.3s; }
h2 { text-align: center; margin-bottom: 25px; }
h3 { font-size: 1.2rem; margin: 20px 0 10px; font-weight: bold; }
label { font-weight: 600; margin-bottom: 6px; display: block; }
input[type="number"], select { width: 100%; padding: 12px; border-radius: 6px; border: 1px solid #ccc; font-size: 1rem; margin-bottom: 18px; }
#result-mileage, #result-pit {
  margin: 20px 0 30px;
  padding: 20px 20px 30px;
  background: #eef3fa;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  font-weight: 500;
  white-space: normal;
  line-height: 1.5;
  word-break: break-word;
  font-size: 1rem;
  transition: background-color 0.3s;
}
#result-mileage p, #result-pit p { margin: 6px 0; }
#result-mileage .value, #result-pit .value { font-weight: bold; }

body.dark-mode { background: #1e1e1e; color: #f0f0f0; }
body.dark-mode .container { background: #2c2c2c; }
body.dark-mode input, body.dark-mode select { background: #444; color: #f0f0f0; border: 1px solid #666; }
body.dark-mode #result-mileage, body.dark-mode #result-pit { background: #303841; }

.toggle-switch { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.toggle-switch input[type="checkbox"] {
  width: 40px;
  height: 20px;
  appearance: none;
  background: #ccc;
  border-radius: 20px;
  position: relative;
  outline: none;
  cursor: pointer;
  transition: background-color 0.3s;
}
.toggle-switch input[type="checkbox"]::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: transform 0.3s;
}
.toggle-switch input[type="checkbox"]:checked { background: #4285f4; }
.toggle-switch input[type="checkbox"]:checked::before { transform: translateX(20px); }

.required-warning { border-color: #e74c3c !important; box-shadow: 0 0 4px rgba(231,76,60,0.5); }

/* Styling for the Timer Button */
#timerButton {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 0px 20px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  margin-bottom: 18px;
}
#timerButton:hover { background-color: #45a049; }
#timerButton:active { background-color: #397d3a; }
#timerButton:focus { outline: none; }

/* Footer version */
.app-footer {
  text-align: center;
  font-size: 0.9rem;
  color: #666;
  margin: 30px 0 15px;
}
body.dark-mode .app-footer { color: #aaa; }

/* ---------------- Flyout menu styles ---------------- */
.flyout-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.25);
  opacity: 0; transition: opacity .2s ease; z-index: 999;
}
.flyout-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: 280px;
  background: #fff; color: #333; box-shadow: -8px 0 24px rgba(0,0,0,.18);
  transform: translateX(100%); transition: transform .25s ease;
  z-index: 1000; display: flex; flex-direction: column;
  border-left: 1px solid #eee;
}
body.dark-mode .flyout-panel { background: #2c2c2c; color: #f0f0f0; border-left-color:#444; }
.flyout-panel.open { transform: translateX(0); }
.flyout-overlay.show { opacity: 1; }

.flyout-header {
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 16px; font-weight:700; border-bottom:1px solid #eee;
}
body.dark-mode .flyout-header { border-bottom-color:#444; }
.icon-btn { background:none; border:none; color:inherit; cursor:pointer; font-size:20px; }

.flyout-links { padding: 8px; display:flex; flex-direction:column; gap:4px; }
.menu-link {
  display:block; padding: 12px 12px; border-radius:8px; text-decoration:none; color:inherit;
  border:1px solid transparent;
}
.menu-link:hover { background:#eef3fa; }
body.dark-mode .menu-link:hover { background:#303841; }
.menu-link[aria-current="page"] { border-color:#ccc; }
body.dark-mode .menu-link[aria-current="page"] { border-color:#666; }

.flyout-footer { margin-top:auto; padding: 10px 12px; opacity:.7; border-top:1px solid #eee; }
body.dark-mode .flyout-footer { border-top-color:#444; }

/* ===================== Mini-apps: shared helpers ===================== */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.span-2 { grid-column: 1 / -1; }
.center-field { display: flex; flex-direction: column; align-items: center; }
.center-field .field-wrap { width: 100%; max-width: 300px; }
.kv { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0; }

/* Spacing utility */
.stack-md > * + * { margin-top: 12px; }

/* Result card */
.result-box {
  margin: 20px 0 30px; padding: 20px 20px 30px;
  background: #eef3fa; border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  font-weight: 500; line-height: 1.5; font-size: 1rem;
  transition: background-color 0.3s, color 0.3s;
}
body.dark-mode .result-box { background: #303841; }

/* Checkbox row + utilities */
.checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.dimmed { opacity: .5; }
.hidden { display: none !important; }

/* ===================== Delta presentation ===================== */
.delta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.delta-value {
  font-size: 1.4rem;
  font-weight: bold;
  margin-top: 6px;
}
.delta-positive { color: #2e7d32; }  /* green */
.delta-negative { color: #c62828; }  /* red */
.delta-neutral  { color: #666; }     /* gray */
body.dark-mode .delta-neutral { color: #aaa; }

/* Overlay shell */
#pinionOverlay { position:fixed; inset:0; display:none; z-index:9999; }
#pinionOverlay[aria-hidden="false"] { display:block; }
#pinionOverlay .pp-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.5); }
#pinionOverlay .pp-sheet {
  position:absolute; inset:6% 2% auto 2%;
  background:#1a1f25; border-radius:16px; box-shadow:0 8px 40px rgba(0,0,0,.45);
  display:flex; flex-direction:column; max-height:88%;
}
@media (min-width: 720px) {
  #pinionOverlay .pp-sheet { inset:8% 20% auto 20%; }
}
.pp-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 12px 6px;
  border-bottom:1px solid #2a2a2a;
}
.pp-header h2 { margin:0; font-size:1.2rem; }
#ppBack {
  background:transparent; border:0; color:#cfe6df; font-size:1.2rem; padding:6px 8px; cursor:pointer;
}
.pp-table-wrap { overflow:auto; -webkit-overflow-scrolling:touch; }
.pp-table { width:100%; border-collapse:collapse; }
.pp-table thead th {
  text-align:left; font-size:.8rem; opacity:.8; padding:10px 14px; border-bottom:1px solid #2a2a2a;
}
.pp-table td { padding:14px; border-bottom:1px solid #222a30; text-align:left; }
.pp-row { cursor:pointer; border-radius:12px; }
.pp-row.selected { background:#2d4a45; }
.pp-table td:nth-child(2), .pp-table td:nth-child(3), .pp-table td:nth-child(4) {
  text-align:right; font-variant-numeric:tabular-nums;
}