/* The title plate. One card for every kit. The study's own title grows to hold the kit, then shrinks back.
   Colours, type and the anchor come from the page. This file draws nothing until the plate is open. */

.kit-plate-layer { position: fixed; inset: 0; z-index: 20; background: transparent; }
.kit-plate-layer[hidden] { display: none; }
html.kit-plate-open, html.kit-plate-open body { overflow: hidden; }
.kit-plate-source { visibility: hidden !important; }

.kit-plate {
  position: fixed; z-index: 21;
  display: flex; flex-direction: column;
  max-height: calc(100svh - 32px);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--kit-bg, rgba(14, 13, 16, .82));
  color: var(--kit-ink, #efe9df);
  font: 300 14px/1.45 var(--sans, Onest, system-ui, sans-serif);
  scrollbar-width: thin;
  scrollbar-color: var(--kit-accent, currentColor) transparent;
}
.kit-plate * { box-sizing: border-box; }
.kit-plate.has-wash { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.kit-plate.is-paper { border: 1px solid var(--kit-line, rgba(21, 20, 14, .16)); box-shadow: 0 30px 80px rgba(21, 20, 14, .10); }
.kit-plate.is-opening { transform-origin: left bottom; animation: kit-plate-in .64s cubic-bezier(.22, 1, .36, 1) both; }
.kit-plate.is-closing { transform-origin: left bottom; animation: kit-plate-out .4s ease both; }
@keyframes kit-plate-in {
  from { transform: scale(var(--kit-from-x, .72), var(--kit-from-y, .18)); }
  to { transform: none; }
}
@keyframes kit-plate-out {
  to { transform: scale(var(--kit-from-x, .72), var(--kit-from-y, .18)); }
}

.kit-plate .kit-plate-body { display: flex; flex-direction: column; min-height: 0; padding: 14px 16px 14px; }
.kit-plate .kit-plate-head { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: baseline; }
.kit-plate .kit-plate-eyebrow { margin: 0; font: 500 11px/1.4 var(--mono, "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--kit-accent); }
.kit-plate .kit-plate-head h2 { grid-column: 1 / -1; margin: 2px 0 0; font: 300 clamp(28px, 3vw, 34px)/.95 var(--sans, Onest, system-ui, sans-serif); letter-spacing: -.035em; color: var(--kit-ink); }
.kit-plate.is-home { --sans: Onest, system-ui, sans-serif; --mono: Onest, system-ui, sans-serif; }
.kit-plate.is-home .kit-plate-head h2 { font-family: "Poiret One", sans-serif; font-weight: 400; letter-spacing: -.025em; }
.kit-plate .kit-plate-close {
  grid-column: 2; grid-row: 1; justify-self: end;
  padding: 4px 8px; border: 0; background: transparent; cursor: pointer;
  font: 500 12px/1 var(--mono, "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--kit-soft, var(--kit-lede));
}
.kit-plate .kit-plate-close:hover, .kit-plate .kit-plate-close:focus-visible { color: var(--kit-ink); }
.kit-plate .kit-plate-close:focus-visible, .kit-plate .kit-plate-download:focus-visible { outline: 2px solid var(--kit-accent); outline-offset: 2px; }
.kit-plate .kit-plate-what { margin: 12px 0 0; color: var(--kit-lede); text-wrap: pretty; }
.kit-plate .kit-plate-inside, .kit-plate .kit-plate-tools { display: grid; gap: 11px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--kit-line, rgba(255, 255, 255, .12)); }
.kit-plate .kit-plate-block h3 { margin: 0 0 3px; font: 500 11px/1.3 var(--mono, "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--kit-accent); }
.kit-plate .kit-plate-block p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--kit-lede); text-wrap: pretty; }
.kit-plate code { font: 500 .92em var(--mono, "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace); color: var(--kit-ink); }
.kit-plate .kit-plate-end { margin: 14px 0 0; }
.kit-plate .kit-plate-download {
  display: block; padding: 12px 14px; border: 1px solid var(--kit-ink); background: transparent;
  color: var(--kit-ink); text-align: center; text-decoration: none;
  font: 500 12px/1 var(--mono, "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace); letter-spacing: .08em; text-transform: uppercase;
}
.kit-plate .kit-plate-download:hover, .kit-plate .kit-plate-download:focus-visible { background: var(--kit-ink); color: var(--kit-inverse, var(--kit-bg)); }

@media (max-width: 700px) {
  .kit-plate.is-sheet { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: calc(100svh - 12px); }
  .kit-plate.is-sheet.is-opening { animation-name: kit-plate-sheet-in; transform-origin: center bottom; }
  .kit-plate.is-sheet.is-closing { animation-name: kit-plate-sheet-out; transform-origin: center bottom; }
  .kit-plate .kit-plate-what { margin-top: 8px; }
  .kit-plate .kit-plate-inside, .kit-plate .kit-plate-tools { gap: 8px; margin-top: 10px; padding-top: 8px; }
  .kit-plate .kit-plate-block p { font-size: 12.5px; line-height: 1.4; }
  .kit-plate .kit-plate-end { margin-top: 10px; }
  .kit-plate .kit-plate-download { padding: 11px 12px; }
  .kit-plate .kit-plate-head h2 { font-size: 26px; }
  .kit-plate .kit-plate-body { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}
@keyframes kit-plate-sheet-in {
  from { transform: translateY(36px); }
  to { transform: none; }
}
@keyframes kit-plate-sheet-out {
  to { transform: translateY(24px); }
}
@media (prefers-reduced-motion: reduce) {
  .kit-plate.is-opening, .kit-plate.is-closing { animation: none; }
}