/* Pelican-bicycle alternatives. Plain CSS, no external resources. */

:root { color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: #f8f8f6;
  color: #222;
  font: 15px/1.5 Helvetica, Arial, sans-serif;
}
body:has(dialog[open]) { overflow: hidden; }

a { color: #1a4fa3; }
a:hover { color: #0d2f66; }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.25; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skip { position: absolute; left: -9999px; top: 6px; background: #fff; border: 1px solid #999; padding: 6px 10px; z-index: 100; }
.skip:focus { left: 8px; }

/* Header */
.head { padding: 16px 16px 12px; border-bottom: 1px solid #ccc; }
.head > * { max-width: 1400px; margin-left: auto; margin-right: auto; }
.head h1 { font-size: 24px; margin: 0 0 6px; }
.lede { margin: 0 0 10px; max-width: 90ch; }
.byline {
  margin: 0; max-width: 90ch;
  padding: 8px 12px;
  border: 1px solid #bbb; background: #fff;
  font-size: 14px;
}
.byline strong { font-weight: bold; }

/* Toolbar */
.toolbar { position: sticky; top: 0; z-index: 10; background: #f8f8f6; border-bottom: 1px solid #ccc; }
.toolbar-inner {
  max-width: 1400px; margin: 0 auto; padding: 6px 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  font-size: 14px;
}
.toolbar nav a { margin-right: 12px; }
.toolbar nav a[aria-current="page"] { color: #222; font-weight: bold; text-decoration: none; }
.ctl { display: inline-flex; }
.ctl button {
  font: inherit; color: #222;
  padding: 4px 10px;
  border: 1px solid #999; background: #fff;
  cursor: pointer; margin-left: -1px;
}
.ctl button:first-child { margin-left: 0; }
.ctl button:hover { background: #eee; }
.ctl button[aria-pressed="true"] { background: #ddd; font-weight: bold; }
.jump-wrap { flex: 0 1 240px; min-width: 150px; }
.jump { font: inherit; color: #222; width: 100%; padding: 4px 6px; border: 1px solid #999; background: #fff; }
@media (max-width: 640px) {
  .toolbar-inner { gap: 6px 10px; }
  .toolbar nav { margin-right: auto; }
  .toolbar nav a { margin-right: 8px; }
  .ctl button { padding: 4px 7px; font-size: 13px; }
  .jump-wrap { flex: 1 1 60px; min-width: 0; }
  .jump { font-size: 13px; padding: 4px 4px; }
}

/* Gallery */
.gallery { max-width: 1400px; margin: 0 auto; padding: 2px 16px 20px; }
.prompt { padding: 16px 0 6px; border-bottom: 1px solid #ddd; scroll-margin-top: 46px; }
.prompt h2 { font-size: 18px; margin: 0 0 2px; }
.prompt-text { color: #666; font-size: 13px; margin: 0 0 10px; }
.group { margin: 0 0 12px; }
.group-head { font-size: 13px; margin: 0 0 8px; }
.group-head span { color: #666; margin-left: 8px; }

.plates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px 12px;
}
@media (max-width: 560px) {
  .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }
}
.plate { margin: 0; min-width: 0; }
.plate-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #fff;
  border: 1px solid #ccc;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-in;
}
.plate-frame:hover { border-color: #888; }
.plate-frame:focus-visible { outline: 2px solid #1a4fa3; outline-offset: 1px; }
.plate-frame img { width: 100%; height: 100%; object-fit: contain; padding: 4%; display: block; }
.plate-frame.broken img { display: none; }
.plate-frame.broken::after { content: "SVG did not render"; font-size: 13px; color: #666; }

/* SVGs without a viewBox do not scale inside <img>; they are shown at their
   declared pixel size and scaled with a transform computed in site.js. */
.plate-frame.fixed img, .lb-fixed img {
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
  max-width: none; max-height: none;
  padding: 0; flex: none;
  object-fit: fill;
  transform: scale(var(--s, 1));
  transform-origin: center center;
}

figcaption { font-size: 13px; padding: 4px 0 0; line-height: 1.35; }
figcaption .model { font-weight: bold; }
figcaption .lab, figcaption .stats { color: #666; }

/* By-model view */
.model-picker { padding: 12px 0 4px; font-size: 14px; }
.model-picker p { margin: 6px 0; }
.model-picker button {
  font: inherit; color: #222; font-size: 13px;
  padding: 3px 8px; margin: 2px 4px 2px 0;
  border: 1px solid #999; background: #fff; cursor: pointer;
}
.model-picker button:hover { background: #eee; }
.model-picker button[aria-pressed="true"] { background: #ddd; font-weight: bold; }
.model-sheet { padding: 12px 0 8px; border-bottom: 1px solid #ddd; margin-bottom: 12px; }
.model-sheet h2 { font-size: 18px; margin: 0 0 8px; }
.model-sheet dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; margin: 0; font-size: 14px; }
.model-sheet dt { color: #666; }
.model-sheet dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .model-sheet dl { grid-template-columns: 1fr; gap: 1px; } .model-sheet dt { margin-top: 6px; } }

/* Prompt index */
.index { max-width: 1400px; margin: 0 auto; padding: 14px 16px 10px; }
.index h2 { font-size: 16px; margin: 0 0 6px; }
.index ol { columns: 3; column-gap: 32px; margin: 0; padding-left: 28px; font-size: 14px; }
.index li { break-inside: avoid; padding: 1px 0; }
.muted { color: #666; }
@media (max-width: 900px) { .index ol { columns: 2; } }
@media (max-width: 560px) { .index ol { columns: 1; } }

/* Lightbox */
.lightbox { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: transparent; }
.lightbox::backdrop { background: rgba(0, 0, 0, .85); }
.lb-inner { width: 100%; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lb-stage { position: relative; min-height: 0; cursor: zoom-out; }
.lb-img { position: absolute; inset: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lb-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; background: #fff; cursor: default; }
.lb-broken { color: #fff; text-align: center; padding: 40px; }
.lb-bar {
  background: #f8f8f6; border-top: 1px solid #ccc;
  padding: 8px 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px;
  font-size: 14px;
}
.lb-text { flex: 1 1 300px; min-width: 0; }
.lb-title { font-weight: bold; }
.lb-sub { color: #555; font-size: 13px; }
.lb-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lb-nav button, .lb-nav a {
  font: inherit; font-size: 13px; color: #222;
  padding: 4px 10px;
  border: 1px solid #999; background: #fff; cursor: pointer; text-decoration: none;
}
.lb-nav button:hover, .lb-nav a:hover { background: #eee; }
.lb-nav button:disabled { opacity: .4; cursor: default; }
.lb-count { color: #666; padding: 0 4px; }

/* About page */
.text { max-width: 90ch; margin: 0 auto; padding: 8px 16px 30px; }
.text h2 { font-size: 18px; margin: 26px 0 8px; }
.text p { margin: 0 0 12px; }
.text pre {
  background: #fff; border: 1px solid #ccc;
  padding: 10px 12px; margin: 6px 0 12px;
  font: 13px/1.45 Menlo, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.text details { margin: 6px 0; }
.text summary { cursor: pointer; }
.table-scroll { overflow-x: auto; margin: 4px 0 16px; }
@media (min-width: 1000px) {
  /* Let wide tables spill past the text column when there is room. */
  .table-scroll {
    --breakout: min(240px, calc((100vw - 90ch) / 2 - 16px));
    width: calc(100% + 2 * var(--breakout));
    margin-left: calc(-1 * var(--breakout));
  }
}
.text table { border-collapse: collapse; width: 100%; font-size: 14px; }
.text th, .text td { text-align: left; padding: 5px 12px 5px 0; border-bottom: 1px solid #ddd; vertical-align: top; }
.text th { font-weight: bold; white-space: nowrap; }
.text td:first-child { white-space: nowrap; }
.text td.num, .text th.num { text-align: right; white-space: nowrap; }
.text tfoot td { font-weight: bold; }

/* Footer */
.foot { border-top: 1px solid #ccc; padding: 12px 16px 30px; font-size: 13px; color: #555; }
.foot p { max-width: 1400px; margin: 0 auto; }