/* proto-pages-oracle.css: Oracle Lighting's look on the shared frame (proto-pages.css), on every landing page.
   The colours are cl-site.css's (Oracle's black theme, white type, the red accent on the one Add, Eurostile headings);
   this sheet adds the photo grounds, the version select of a bundled card (search/_oracle.html), the bulb size picker,
   the vehicle panels. The theme makes body a flex row, so the main takes the full width itself. */
@layer base, kit, site;

@layer site {

.ora { display: block; box-sizing: border-box; width: 100%; flex: 1 0 100%; background: var(--site-bg); color: var(--site-fg); }
.ora a:not(.pp-btn) { color: var(--site-fg); }
.ora .pp-note a, .ora .pp-lead a { text-decoration: underline; }
.ora .pp-btn--accent:hover { background: var(--site-fg); color: var(--site-bg); }
.ora .pp-btn--ghost { color: var(--site-fg); }
.ora .pp-btn--ghost:hover { background: var(--site-fg); color: var(--site-bg); }
.ora .pp-card__name a:hover, .ora .pp-links a:hover { color: var(--site-fg); text-decoration-thickness: 2px; }
.ora .pp-tile { background: var(--site-card); border-color: var(--site-line); }
.ora .pp-tile__img, .ora .pp-card__img { background: var(--site-fg); border-bottom-color: var(--site-line); }
.ora .pp-tile:hover, .ora .pp-tile.is-mine { border-color: var(--site-fg); }
.ora .pp-tile:hover .pp-tile__name { color: var(--site-fg); }
.ora .pp-shead { border-bottom-color: var(--site-line); }
.ora .pp-nofit { border-color: var(--site-line); }
.ora .pp-clear, .ora .pp-links a { color: var(--site-fg); }

/* a bundled card's versions: the select over the Add, 40px and 16px like the frame's year picker */
.ora-pick { display: flex; flex-direction: column; gap: 8px; }
.ora-pick__select {
  width: 100%; min-height: 40px; padding: 0 8px; border: 2px solid var(--site-line); border-radius: var(--site-radius);
  background: var(--site-bg); color: var(--site-fg); font: 400 16px/1.2 var(--site-font-body);
}
.ora-pick__select:focus-visible { outline: 2px solid var(--site-fg); outline-offset: 2px; }

/* the bulb size picker (led-headlight-bulbs.html): a row of square 40px buttons, the picked one filled */
.ora-sizes { margin-top: 24px; }
.ora-sizes[hidden] { display: none; }
.ora-sizes__row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ora-size {
  min-width: 64px; min-height: 40px; padding: 0 16px; border: 2px solid var(--site-fg); border-radius: var(--site-radius);
  background: var(--site-bg); color: var(--site-fg); font: 700 16px/1 var(--site-font-body); cursor: pointer;
}
.ora-size[aria-pressed="true"], .ora-size:hover { background: var(--site-fg); color: var(--site-bg); }
.ora-size:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; }
.ora-group[hidden] { display: none; }

/* the vehicle panels: a part's heading inside a generation, a closed generation */
.ora-panel__h { margin: 28px 0 12px; }
.ora-panel__more > summary { display: flex; align-items: center; min-height: 48px; padding: 4px 0; border-bottom: 2px solid var(--site-line); font: 700 22px/1.2 var(--site-font-heading); text-transform: uppercase; cursor: pointer; }

@media (max-width: 979.98px) {
  .ora-panel__more > summary { font-size: 17px; }
  .ora-panel__h { margin: 20px 0 10px; }
  .ora-sizes { margin-top: 16px; }
  .ora-size { font-size: 14px; }
}

}