/* Keep the existing card width and portrait; reveal only vertical space. */
.card { overflow-anchor: none; }
.card:hover, .card:focus-within { transform: none; }
.card.is-open { border-color: rgba(255,255,255,.28); background: var(--card-hover); }
.card-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 24px;
  padding: 0; margin: 0 0 3px; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.card-toggle .card-title { flex: 1; }
.preview-hint { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font: 10px var(--mono); }
.preview-chevron { width: 10px; height: 10px; transition: transform .2s ease; }
.is-open .preview-chevron { transform: rotate(180deg); }
.card-url { color: inherit; text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
a.card-url:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.card-meta { flex-wrap: wrap; }
.card-meta .tag { flex-shrink: 0; }
.card-url .visit-arrow { margin-left: 3px; }
.card button:focus-visible { outline: 2px solid #f3e2bc; outline-offset: 3px; border-radius: 3px; }
.project-preview {
  display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows .22s ease, opacity .18s ease, visibility 0s .22s;
}
.is-open .project-preview { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
.preview-clip { min-height: 0; overflow: hidden; }
.preview-body { padding-top: 12px; }
.preview-stage {
  position: relative; width: 100%; aspect-ratio: 8 / 5; overflow: hidden;
  border: 1px solid var(--line); border-radius: 7px; background: #101114;
  isolation: isolate;
}
.preview-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.preview-frame {
  position: absolute; inset: 0; width: 960px; height: 600px; border: 0;
  transform-origin: top left; pointer-events: none; background: #101114;
}
.preview-frame[hidden], .preview-image[hidden] { display: none; }
.preview-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 10px; padding: 22px; text-align: center; color: var(--muted);
  font-size: 12px; line-height: 1.5;
}
.preview-placeholder[hidden] { display: none; }
.preview-placeholder strong { color: var(--ink); font-size: 14px; font-weight: 500; }
.preview-toolbar { display: flex; align-items: center; gap: 6px; padding-top: 8px; }
.preview-caption { margin-right: auto; color: var(--muted); font: 9px/1.5 var(--mono); }
.preview-action {
  min-height: 30px; padding: 5px 8px; color: var(--ink); border: 1px solid var(--line);
  border-radius: 5px; background: rgba(255,255,255,.035); font: 10px var(--mono); cursor: pointer;
}
.preview-action:hover { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.07); }
.preview-status { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
@media (pointer: coarse) {
  .card-toggle { min-height: 44px; }
  .card-meta a { display: inline-flex; align-items: center; min-height: 44px; }
  .preview-action { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-preview, .preview-chevron { transition: none; }
}