/* sheet.css — the detail panel (projects, timeline entries, certificates) */

.sheet {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent;
  overflow: hidden;
  color: var(--text);
}
.sheet::backdrop { background: transparent; }
.sheet[open] { display: grid; place-items: center; }
.sheet__scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
}
.sheet__panel {
  position: relative;
  width: min(760px, calc(100vw - 2 * var(--gutter)));
  max-height: min(88vh, 960px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--line);
  transform-origin: 0 0;
  will-change: transform, opacity;
}
.sheet[data-variant="viewer"] .sheet__panel { width: min(980px, calc(100vw - 2 * var(--gutter))); }
.sheet__body { min-height: 120px; }
.sheet__top { position: sticky; top: 0; z-index: 3; height: 0; }   /* stays put while the panel scrolls */
.sheet__close {
  position: absolute; top: var(--space-3); right: var(--space-3);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text);
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
}
.sheet__close .icon { width: 18px; height: 18px; }
.sheet__grabber { display: none; }

/* Phones: a bottom sheet you can drag down to close */
@media (max-width: 719px) {
  .sheet[open] { place-items: end center; }
  .sheet__panel {
    width: 100%;
    max-height: 92svh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sheet[data-variant="viewer"] .sheet__panel { width: 100%; }
  .sheet__grabber { display: block; position: absolute; inset: 0 0 auto; height: 0; }
  .sheet__grabber::before {
    content: '';
    position: absolute; left: 50%; top: 7px;
    translate: -50% 0;
    width: 38px; height: 5px; border-radius: 3px;
    background: color-mix(in srgb, var(--text) 25%, transparent);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .sheet__close { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}