/* Eevee 9 -- warm brown/cream palette, lightly Eevee-flavoured. */

:root {
  --bg:        #201812;
  --bg-raise:  #2C2119;
  --card:      #342719;
  --line:      #4A3826;
  --text:      #F5E7CE;
  --text-dim:  #B79E7F;
  --fur:       #A9713C;
  --fur-lite:  #C89B6A;
  --ruff:      #F0DCB4;
  --warm:      #C4622D;
  --cool:      #3E7C9B;
  --lock:      #6B7F52;
  --danger:    #B4483C;
  --radius:    16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* The [hidden] attribute must always win. Author rules like `.charge-status {
   display: flex }` otherwise override the browser's default [hidden] hiding,
   which left the climate indicator permanently visible. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  padding: env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom) + 24px);
  -webkit-user-select: none;
  user-select: none;
}

main { max-width: 520px; margin: 0 auto; padding: 8px 16px; }

/* ------------------------------------------------------------- topbar */

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px 20px; }
.brand  { display: flex; align-items: center; gap: 12px; }
h1      { font-size: 22px; margin: 0; letter-spacing: -0.01em; }
.sub    { margin: 0; font-size: 13px; color: var(--text-dim); }

.mark      { width: 40px; height: 40px; flex: none; }
.mark.big  { width: 64px; height: 64px; display: block; margin: 0 auto 16px; }
.mark .head { fill: var(--fur); }
.mark .ear  { fill: var(--fur); }
.mark .ruff { fill: var(--ruff); }
.mark .eye  { fill: #2A1F17; }

.icon-btn {
  background: none; border: 0; color: var(--text-dim);
  font-size: 22px; padding: 8px; cursor: pointer;
}

/* -------------------------------------------------------------- status */

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 24px;
}
.status-grid { display: flex; justify-content: space-around; text-align: center; }
.stat        { display: flex; flex-direction: column; gap: 2px; }
.stat-val    { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-lbl    { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }

.charge-status {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 10px 12px;
  background: var(--bg-raise); border-radius: 12px;
  font-size: 14px; font-weight: 500;
}
.charge-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--text-dim); }
.charge-dot.charging { background: #6FC86F; box-shadow: 0 0 0 0 rgba(111,200,111,.6); animation: chargepulse 1.6s ease-out infinite; }
.charge-dot.plugged  { background: var(--fur-lite); }
.charge-dot.climate  { background: var(--warm); box-shadow: 0 0 0 0 rgba(196,98,45,.6); animation: climatepulse 1.6s ease-out infinite; }
@keyframes chargepulse  { to { box-shadow: 0 0 0 7px rgba(111,200,111,0); } }
@keyframes climatepulse { to { box-shadow: 0 0 0 7px rgba(196,98,45,0); } }
.charge-status.climate-on { color: var(--fur-lite); }

.status-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--text-dim);
}
.status-foot .foot-sep { margin-left: auto; margin-right: 4px; }
.hint { font-size: 12px; color: var(--text-dim); margin: 12px 0 0; line-height: 1.4; }

.link-btn {
  background: none; border: 0; color: var(--fur-lite);
  font-size: 13px; padding: 4px; cursor: pointer; font-weight: 600;
}
.refresh-btn {
  background: var(--bg-raise); color: var(--fur-lite);
  border: 1px solid var(--line); border-radius: 999px;
  font: 600 13px inherit; font-family: inherit;
  padding: 7px 16px; cursor: pointer; white-space: nowrap;
  transition: transform .08s ease, filter .15s ease;
}
.refresh-btn:active { transform: scale(.95); filter: brightness(1.2); }
.link-btn.center { display: block; margin: 12px auto 0; }

/* ------------------------------------------------------------- groups */

.group { margin-bottom: 26px; }
h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-dim); margin: 0 4px 10px; font-weight: 600;
}
.row { display: flex; gap: 12px; }
.row > .btn { flex: 1; }

.btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 74px; padding: 14px 12px;
  background: var(--bg-raise); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 17px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: transform .08s ease, filter .15s ease;
}
.btn:active { transform: scale(.97); filter: brightness(1.15); }
.btn.wide   { width: 100%; margin-top: 12px; min-height: 52px; }

.btn-title { font-size: 17px; }
.btn-sub   { font-size: 12px; font-weight: 500; color: var(--text-dim); }

/* The Doors pair shows the car's ACTUAL state, not a primary/secondary
   ranking: whichever button matches the doors right now is filled, the other
   falls back to the plain .btn outline. Both stay fully tappable -- re-sending
   lock when it's already locked is legitimate. `current` is applied by
   setDoors() in app.js. */
.btn.lock.current   { background: var(--lock); border-color: transparent; }
.btn.unlock.current { background: var(--warm); border-color: transparent; }
.btn.warm   { background: var(--warm);  border-color: transparent; }
.btn.cool   { background: var(--cool);  border-color: transparent; }
.btn.warm .btn-sub, .btn.cool .btn-sub, .btn.lock .btn-sub { color: rgba(255,255,255,.75); }
.btn.primary { background: var(--fur); border-color: transparent; min-height: 52px; }
.btn.ghost   { background: transparent; }

.btn[disabled] { opacity: .45; pointer-events: none; }

/* --------------------------------------------------------- busy spinner

   A command takes 10-30s to reach the car, so a pressed button has to say so
   for that whole time or the press looks like it never registered. The label
   is turned transparent rather than removed (layout, and so the button keeps
   its width) and a ring is centred over it. */

.busy { position: relative; pointer-events: none; }
.busy, .busy * { color: transparent !important; }
.busy::after {
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: var(--spin-size, 22px); height: var(--spin-size, 22px);
  border: var(--spin-width, 2.5px) solid rgba(245, 231, 206, .32);
  border-top-color: var(--ruff);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.seg-btn.busy    { --spin-size: 17px; --spin-width: 2px; }
.refresh-btn.busy{ --spin-size: 15px; --spin-width: 2px; }

/* Respect reduced-motion: no rotation, but the button must still read as
   working, so fade the ring instead of spinning it. */
@media (prefers-reduced-motion: reduce) {
  .busy::after { animation: spinfade 1.1s ease-in-out infinite; }
  @keyframes spinfade { 50% { opacity: .3; } }
}

/* ------------------------------------------------------------- charge */

.charge-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px;
}
.charge-lbl { font-weight: 600; font-size: 15px; }
.charge-lbl small { display: block; font-size: 11px; color: var(--text-dim); font-weight: 500; }

.seg { display: flex; gap: 6px; }
.seg-btn {
  min-width: 62px; min-height: 40px; padding: 0 12px;
  background: transparent; color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  font: 600 15px inherit; font-family: inherit; cursor: pointer;
  transition: transform .08s ease;
}
.seg-btn:active { transform: scale(.95); }
.seg-btn.active { background: var(--fur); border-color: transparent; }
.seg-btn[disabled] { opacity: .45; pointer-events: none; }

.footnote { text-align: center; font-size: 12px; color: var(--text-dim); margin: 28px 0 0; }

/* ---------------------------------------------------------------- tabs */

.tabs {
  display: flex; gap: 6px; background: var(--bg-raise);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 4px; margin: 0 4px 22px;
}
.tab {
  flex: 1; padding: 9px; border: 0; border-radius: 9px;
  background: transparent; color: var(--text-dim);
  font: 600 14px inherit; font-family: inherit; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.tab.active { background: var(--fur); color: #fff; }

/* ------------------------------------------------------- vehicle page */

.veh-eff { text-align: center; padding: 22px 16px; }
.eff-main { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.eff-val  { font-size: 44px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fur-lite); }
.eff-unit { font-size: 16px; color: var(--text-dim); }
.eff-sub  { font-size: 12px; color: var(--text-dim); margin-top: 6px; }

.closed-card { padding: 16px; }
.closed-summary { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.closed-summary::before { content: ''; width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--text-dim); }
.closed-summary.good::before { background: #6FC86F; }
.closed-summary.warn::before { background: var(--warm); }
.openlist { list-style: none; margin: 10px 0 0; padding: 0; }
.openlist:empty { display: none; }
.openlist li {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--warm); padding: 4px 0;
}

.tire-card { padding: 16px; }
.tire-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tire {
  display: flex; align-items: baseline; justify-content: space-between;
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px;
}
.tire-pos { font-size: 12px; color: var(--text-dim); font-weight: 600; }
.tire-psi { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tire-psi.low { color: var(--danger); }
.tire-note { text-align: center; font-size: 11px; color: var(--text-dim); margin-top: 10px; text-transform: uppercase; letter-spacing: .06em; }

.kv-card { padding: 6px 16px; }
.kv { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: 0; }
.kv-k { color: var(--text-dim); font-size: 14px; }
.kv-v { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.kv-v.ok   { color: #6FC86F; }
.kv-v.warn { color: var(--warm); }

/* ------------------------------------------------------------ overlay */

.overlay {
  position: fixed; inset: 0; background: rgba(18,13,9,.92);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 20;
  backdrop-filter: blur(6px);
}
.overlay[hidden] { display: none; }

.sheet {
  width: 100%; max-width: 380px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 22px; padding: 28px 22px;
}
.sheet h2 { font-size: 19px; text-transform: none; letter-spacing: normal; color: var(--text); margin: 0 0 8px; text-align: center; }
.sheet p  { font-size: 13px; color: var(--text-dim); margin: 0 0 18px; text-align: center; line-height: 1.5; }
.sheet code { background: var(--bg); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

input {
  width: 100%; padding: 14px; margin-bottom: 12px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
  font: 16px inherit; font-family: inherit; text-align: center;
  -webkit-user-select: text; user-select: text;
}
input:focus { outline: 2px solid var(--fur); outline-offset: -1px; }

.err { color: #E89A8E; font-size: 13px; text-align: center; margin: 14px 0 0; }

/* -------------------------------------------------------------- toast */

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 24px);
  background: var(--bg-raise); color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 11px 20px; font-size: 14px; font-weight: 500;
  z-index: 30; max-width: 90vw; text-align: center;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
.toast[hidden] { display: none; }
.toast.bad  { border-color: var(--danger); }
.toast.good { border-color: var(--lock); }