/* Velo Garage web calculator — the app's Tire Pressure screen, ported.
   Everything is scoped under .vgc and rendered in the app's dark cockpit
   appearance regardless of page theme, exactly like the app's dark mode:
   five-step tonal surfaces, glacier-cyan numbers, tech-cyan input accents. */

.vgc {
  /* App tokens (dark appearance), verbatim from Color+Theme.swift */
  --vgc-surface-base: #0E0E0E;
  --vgc-surface-low: #131313;
  --vgc-surface: #1A1919;
  --vgc-surface-high: #201F1F;
  --vgc-surface-highest: #262626;
  --vgc-primary: #FFFFFF;
  --vgc-secondary: #ADAAAA;
  --vgc-tertiary: #777575;
  --vgc-accent: #05BFDE;
  --vgc-accent-deep: #04A0BD;
  --vgc-tech: #00E4FF;
  --vgc-border: rgba(84, 84, 88, 0.5);
  --vgc-warning: #FFD60A;

  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  color: var(--vgc-primary);
  background: var(--vgc-surface-base);
  border-radius: 28px;
  padding: 24px 16px 20px;
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.vgc * { box-sizing: border-box; margin: 0; }

.vgc-screen-title {
  font-size: 17px; font-weight: 600; text-align: center; color: var(--vgc-primary);
}

/* ---- Hero card (PressureHeroCard) ---- */

.vgc-hero {
  display: flex; align-items: flex-start;
  background: var(--vgc-surface-high);
  border-radius: 16px;
  padding: 24px 20px;
}
.vgc-hero-readout {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 0;
}
.vgc-hero-divider {
  width: 1px; align-self: center; height: 96px;
  background: var(--vgc-border); margin: 0 4px; flex: none;
  transform: scaleX(0.5);
}
.vgc-metric-label {
  font-size: 13px; font-weight: 500; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--vgc-secondary); line-height: 1.2;
}
.vgc-psi-row { display: flex; align-items: baseline; gap: 4px; }
.vgc-psi {
  font-size: 52px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--vgc-accent);
  text-shadow: 0 0 14px rgba(5, 191, 222, 0.45);
}
.vgc-psi-unit { font-size: 12px; font-weight: 500; color: var(--vgc-secondary); }
.vgc-bar { font-size: 12px; font-weight: 500; color: var(--vgc-tertiary); font-variant-numeric: tabular-nums; }
.vgc-tread { width: 150px; height: 56px; margin-top: 8px; }

/* ---- Group cards (TirePressureInputSection) ---- */

.vgc-group {
  background: var(--vgc-surface-low);
  border-radius: 16px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 18px;
  text-align: left;
}
.vgc-group-title { font-size: 20px; font-weight: 600; color: var(--vgc-primary); line-height: 1.25; }
.vgc-field { display: flex; flex-direction: column; gap: 8px; }
.vgc-field-head { display: flex; align-items: baseline; justify-content: space-between; }
.vgc-unit-toggle { display: flex; gap: 6px; }
.vgc-unit-btn {
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
  color: var(--vgc-secondary); background: none; border: none; padding: 2px 4px; cursor: pointer;
}
.vgc-unit-btn[aria-pressed="true"] { color: var(--vgc-tech); }

/* Capsule chips: selected = white on tech cyan, unselected = secondary on surface-high */
.vgc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vgc-chips--scroll {
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; margin: 0 -16px; padding: 2px 16px;
}
.vgc-chips--scroll::-webkit-scrollbar { display: none; }
.vgc-chip {
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1;
  padding: 9px 14px; border-radius: 9999px; border: none; cursor: pointer;
  color: var(--vgc-secondary); background: var(--vgc-surface-high);
  white-space: nowrap; flex: none;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
/* App spec is white-on-tech-cyan; on the web that fails AA, so the selected
   chip carries the same bright cyan fill with a deep ink label instead. */
.vgc-chip[aria-pressed="true"] { background: var(--vgc-tech); color: #00303A; }
.vgc-chip:focus-visible, .vgc-unit-btn:focus-visible, .vgc-input:focus-visible, .vgc-disclose:focus-visible {
  outline: 1.5px solid var(--vgc-accent); outline-offset: 2px;
}

/* Number fields */
.vgc-input {
  font: inherit; font-size: 22px; font-weight: 700; color: var(--vgc-primary);
  background: var(--vgc-surface-base);
  border: 0.5px solid var(--vgc-border); border-radius: 10px;
  padding: 12px; width: 100%;
  transition: border-color 0.15s ease-out;
  appearance: textfield; -moz-appearance: textfield;
}
.vgc-input::-webkit-outer-spin-button, .vgc-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.vgc-input:focus { outline: none; border: 1.5px solid var(--vgc-accent); padding: 11.5px; }
.vgc-input::placeholder { color: var(--vgc-tertiary); }

/* Rim width disclosure */
.vgc-disclose {
  font: inherit; font-size: 12px; font-weight: 500; color: var(--vgc-secondary);
  background: none; border: none; cursor: pointer; padding: 6px 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.vgc-disclose svg { flex: none; }
.vgc-rim[hidden] { display: none; }

/* ---- Adjustments card ---- */
.vgc-adjustments {
  background: var(--vgc-surface);
  border-radius: 16px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px; text-align: left;
}
.vgc-adjustments[hidden] { display: none; }
.vgc-adj-rows { display: flex; flex-direction: column; gap: 10px; }
.vgc-adj-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vgc-adj-label { font-size: 13px; font-weight: 500; color: var(--vgc-primary); }
.vgc-adj-delta { font-size: 13px; font-weight: 500; color: var(--vgc-primary); font-variant-numeric: tabular-nums; }

/* ---- Safety warning banner ---- */
.vgc-warning {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--vgc-surface);
  border-radius: 12px; padding: 14px; text-align: left;
}
.vgc-warning[hidden] { display: none; }
.vgc-warning svg { flex: none; color: var(--vgc-warning); margin-top: 1px; }
.vgc-warning p { font-size: 13px; font-weight: 500; color: var(--vgc-primary); line-height: 1.3; }

/* ---- Footnote inside the widget ---- */
.vgc-foot {
  font-size: 12px; font-weight: 500; color: var(--vgc-tertiary);
  text-align: center; line-height: 1.4; padding: 0 8px;
}

@media (prefers-reduced-motion: reduce) {
  .vgc-chip, .vgc-input { transition: none; }
}