/* Live dashboard visual widgets */
.widget--demo .widget-body {
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
}

.widget--formula .widget-body {
  justify-content: center;
}

/* ---- G-force plot ---- */
.gforce {
  position: relative;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: max-content minmax(0, 1fr);
  gap: 0.3rem;
  overflow: hidden;
}
.gf-plot-wrap {
  position: relative;
  width: min(100%, 13.2rem);
  height: auto;
  aspect-ratio: 1 / 1;
  max-height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: center;
  margin-inline: auto;
  overflow: visible;
}
.gforce-plot {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.gf-ring {
  fill: none;
  stroke: rgba(157, 181, 168, 0.18);
  stroke-width: 1;
}
.gf-ring:first-of-type {
  stroke: rgba(157, 181, 168, 0.30);
}
.gf-axis {
  stroke: rgba(157, 181, 168, 0.16);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.gf-tick {
  fill: rgba(157, 181, 168, 0.5);
  font-size: 10px;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
}
.gf-center {
  fill: rgba(157, 181, 168, 0.6);
}
.gf-trail {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.35;
}
.gf-dot {
  fill: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent));
  transition: cx 0.12s linear, cy 0.12s linear;
}
/* ACCEL / BRAKE axis captions live inside the SVG (in plot coordinates) so they
   scale with the plot and never overlap the trail, dot or the readout above. */
.gf-cap {
  fill: rgba(157, 181, 168, 0.6);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-anchor: middle;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
}
.gf-readout {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-height: 0;
  pointer-events: none;
}
.gf-main {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
}
.gf-num {
  font-size: 1.5rem;
  font-weight: 700;
  color: #F1F8F4;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.gf-g {
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 600;
}
.gf-sub {
  display: flex;
  gap: 0.5rem;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: rgba(157, 181, 168, 0.7);
}
.gf-sub b {
  color: #E6F0EA;
  font-variant-numeric: tabular-nums;
}

/* ---- GPS track map ---- */
.gpsmap {
  position: relative;
  height: 100%;
  min-height: 220px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--apex-border);
  background: #DDE7E0;
  /* Trap Leaflet's internal stacking (panes/controls climb to z-index ~1000) so
     the floating widget edit controls can sit above the map. */
  isolation: isolate;
}
.gps-leaflet {
  position: absolute;
  inset: 0;
}
.gps-leaflet .leaflet-container {
  background: #DDE7E0;
  font: inherit;
}
.gps-leaflet .leaflet-control-attribution { font-size: 9px; }

/* ---- Formula car (top-view) ---- */
.carviz {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: 100%;
  display: grid;
  /* Fluid layout: the car keeps its intrinsic width while the two telemetry
     columns flex to fill the widget, so nothing is clipped and the panels are
     never marooned by centring whitespace on wide tiles. The widget's row-span
     is sized to this content in JS, so the block is simply centred here. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: max-content;
  gap: clamp(0.25rem, 1.5%, 0.6rem);
  align-items: center;
  align-content: center;
  justify-content: stretch;
  background: radial-gradient(70% 55% at 50% 30%, rgba(52, 214, 160, 0.06), transparent 70%);
  overflow: hidden;
  padding: 0.2rem 0.1rem;
}
.formula-side {
  display: grid;
  grid-template-rows: repeat(2, max-content);
  gap: 0.6rem;
  align-content: center;
  align-self: center;
  width: 100%;
  height: max-content;
  min-width: 0;
  min-height: 0;
}
/* Snug panels are centred in their flexible column, so the horizontal slack is
   shared evenly instead of piling up on the outer edges of the widget. */
.formula-side--left,
.formula-side--right { justify-items: center; }
.formula-car-stage {
  width: var(--formula-car-width, 6.15rem);
  max-width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.car-svg {
  width: 100%;
  height: auto;
  max-height: 12rem;
  max-width: 100%;
  overflow: visible;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45));
  z-index: 1;
}
.car-tyre {
  fill: #0A0F0B;
  stroke: rgba(157, 181, 168, 0.35);
  stroke-width: 1.5;
}
.car-telemetry {
  position: relative;
  z-index: 2;
  /* Shrink-wrap each chip to its own content (capped to the column so it can
     never clip), so the box never dwarfs the text it holds. */
  width: max-content;
  min-width: 0;
  max-width: 100%;
  height: max-content;
  min-height: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(157, 181, 168, 0.18);
  border-radius: 9px;
  background: rgba(7, 10, 8, 0.72);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--apex-muted);
  font-size: 0.64rem;
  line-height: 1.1;
  letter-spacing: 0;
  pointer-events: none;
  overflow: hidden;
  /* Label + value sit in two content-sized columns right next to each other,
     so the name and reading stay close while the values line up down the box. */
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 0.7rem;
  row-gap: 0.04rem;
}
.car-telemetry-title {
  grid-column: 1 / -1;
  justify-self: center;
  text-align: center;
  margin-bottom: 0.22rem;
  color: #F1F8F4;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
/* Each row spreads its label/value into the panel's two shared columns. */
.car-metric-row {
  display: contents;
}
.car-metric-row[hidden] { display: none; }
.car-telemetry span {
  justify-self: start;
  color: rgba(157, 181, 168, 0.72);
  font-weight: 600;
}
.car-telemetry b {
  min-width: 0;
  justify-self: end;
  color: #E6F0EA;
  font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.car-telemetry.is-live {
  border-color: rgba(52, 214, 160, 0.28);
  background: rgba(9, 13, 11, 0.78);
}
.car-pod {
  fill: #161E19;
  stroke: rgba(157, 181, 168, 0.25);
  stroke-width: 1;
}
.car-cockpit {
  fill: #070B08;
  stroke: rgba(157, 181, 168, 0.3);
  stroke-width: 1;
}
.car-halo {
  stroke: var(--accent);
  stroke-width: 3;
  stroke-opacity: 0.8;
}
.car-driver { fill: rgba(157, 181, 168, 0.55); }
.car-spine {
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-opacity: 0.5;
  stroke-dasharray: 4 6;
  animation: carSpine 1.2s linear infinite;
}
@keyframes carSpine { to { stroke-dashoffset: -20; } }

/* ---- Warnings log ---- */
.warnings-log {
  position: relative;
  height: 100%;
  min-height: 220px;
  overflow-y: auto;
  padding: 0.1rem 0.15rem;
}
.warnings-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--apex-muted);
  font-size: 0.8rem;
}
.warnings-empty[hidden] { display: none; }
.warnings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.warning-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "time name val"
    "time kind val";
  align-items: center;
  column-gap: 0.45rem;
  padding: 0.3rem 0.45rem;
  border-radius: 7px;
  border-left: 3px solid var(--apex-border);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.7rem;
}
.warning-row.warning--exceeded { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.08); }
.warning-row.warning--below { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
.warning-time {
  grid-area: time;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  color: var(--apex-muted);
  font-variant-numeric: tabular-nums;
}
.warning-name {
  grid-area: name;
  color: #E6F0EA;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.warning-kind {
  grid-area: kind;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.warning--exceeded .warning-kind { color: #fca5a5; }
.warning--below .warning-kind { color: #fcd34d; }
.warning-val {
  grid-area: val;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}