/* ==========================================================================
   devanshi jain — lab + materials (the bars and the scrolling frame are in page.css)
   A material research index: one uniform grid of numbered entries (name, process words in a lighter
   ink, one text size), photographs taking cells of their own among them. Choosing one shows it large
   in a panel fixed on the right, as on the objects page (a sheet along the bottom on phones); the page
   title shows the lab text there. No footer on this page.
   ========================================================================== */

.lab-page {
  --frame-bottom: calc(var(--edge-y) + var(--safe-b));
  --panel-w: clamp(300px, 26vw, 400px);
  --hair: #dcdcda;
}
p { margin: 0; }

/* ---------- the archive: one rigid, invisible grid ----------
   Four equal columns across the room left of the panel, every cell the same size, evenly spaced rows,
   read left to right. An entry and a photograph each take exactly one cell; only where the photographs
   fall varies (templates/site/lab.php). No lines, boxes or offsets. */
.lm-frame { right: calc(var(--panel-w) + clamp(16px, 2vw, 32px)); }
.lm-grid {
  --cell-h: clamp(190px, 27vh, 260px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: var(--cell-h);
  column-gap: clamp(20px, 2.4vw, 40px); row-gap: clamp(28px, 5vh, 52px);
  padding: var(--fade) 0 var(--fade) var(--side);
}

/* a material that wouldn't fit beside the previous one starts the next row, so an entry and its
   photographs are always read together on one line (lab.php marks it per grid width) */
.lm-row-4 { grid-column-start: 1; }

/* every cell: its number at the top-left corner, then the name and process words, or the picture */
.lm-num { font-size: .88em; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: #a3a5a4; }
.lm-pick {
  display: block; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.lm-pick--entry, .lm-pick--pic { display: flex; flex-direction: column; align-items: flex-start; height: 100%; min-width: 0; line-height: 1.5; overflow: hidden; }
.lm-pick > .lm-num { display: block; flex: none; margin-bottom: .45em; }
.lm-name { display: block; color: var(--ink); }
.lm-tags { display: block; margin-top: .7em; color: #9a9c9b; }
.lm-tags span { display: block; }
/* a photograph keeps its own shape, fitted inside the rest of its cell from the top-left corner (never
   cropped); the cell itself keeps the grid's size, so the rows stay aligned */
.lm-frame-pic { position: relative; display: block; flex: 1 1 auto; width: 100%; min-height: 0; }
.lm-frame-pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: left top; transition: opacity .3s ease; }
@media (hover: hover) {
  .lm-pick--entry:hover .lm-name, .page-title__pick:hover { opacity: .6; }
  .lm-pick--pic:hover img { opacity: .85; }
}
@media (hover: none) { .lm-pick:active, .page-title__pick:active { opacity: .6; } }
.lm-pick:focus-visible, .page-title__pick:focus-visible { outline: 1px dotted var(--ink); outline-offset: 4px; }
/* the chosen cell: a name underlined, its number darkened; the other pictures fade (lab.js) */
.lm-pick--entry.is-on .lm-name, .page-title__pick.is-on { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lm-pick.is-on > .lm-num { color: var(--ink); }
.has-pick .lm-pick--pic:not(.is-on) img { opacity: .35; }


/* ---------- the panel (fixed, right) ---------- */
.lm-panel {
  position: fixed; z-index: 2; right: 0; top: calc(var(--frame-top) - 8px); bottom: var(--frame-bottom);
  width: var(--panel-w); display: flex; flex-direction: column;
  padding: 0 var(--right) 0 clamp(20px, 2.2vw, 36px);
  border-left: 1px solid var(--hair);
}
.lm-item { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-top: 2px; }
.lm-item[hidden] { display: none; }
.lm-item__top { display: flex; justify-content: space-between; font-size: .82em; letter-spacing: .04em; color: var(--ink-soft); }
.lm-item__pic { position: relative; flex: 1 1 auto; min-height: 120px; margin: clamp(14px, 3vh, 32px) 0; }
.lm-item__pic--none { flex: 0 0 0; min-height: 0; margin: 0; }
.lm-item__pic img, .lm-item__pic video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
/* no play button or controls over the film (Safari draws one when it holds autoplay back) */
.lm-item__pic video::-webkit-media-controls { display: none !important; }
.lm-item__pic video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.lm-item__pic video::-webkit-media-controls-overlay-play-button { display: none !important; }
.lm-item__text { line-height: 1.55; padding-bottom: clamp(12px, 2.4vh, 24px); }
.lm-item__pic--none + .lm-item__text { padding-top: clamp(14px, 3vh, 32px); }
.lm-item__name { color: var(--ink); }
.lm-item__tags { margin-top: .3em; color: #9a9c9b; }
.lm-item__note { margin-top: .5em; color: var(--ink-soft); }
.lm-item--about .lm-item__text { padding-top: clamp(14px, 3vh, 32px); color: var(--ink); }
.lm-item--about .lm-item__text p + p { margin-top: .9em; }

.lm-nav {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--hair); padding: clamp(12px, 2vh, 20px) 0 0;
  font-size: .82em; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--ink-soft);
}
.lm-nav__btn {
  position: relative; display: grid; place-items: center; width: 30px; height: 22px; padding: 0;
  border: 0; background: none; color: var(--ink); cursor: pointer;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.lm-nav__btn::after { content: ""; position: absolute; inset: -11px -8px; }
.lm-nav__btn svg { display: block; width: 22px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .lm-nav__btn:hover { opacity: .6; } }
@media (hover: none) { .lm-nav__btn:active { opacity: .55; } }

/* the sheet's × (phones only; the desktop panel is always there) */
.lm-close { display: none; }

/* ---------- tablets ---------- */
@media (max-width: 1100px) {
  .lab-page { --panel-w: 280px; } .lm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lm-row-4 { grid-column-start: auto; } .lm-row-3 { grid-column-start: 1; }
}

/* ---------- phones: the chart fills the screen; the chosen entry in a sheet along the bottom ---------- */
@media (max-width: 719px) {
  .lab-page { --sheet-h: min(41vh, 350px); }
  .lm-frame { right: 0; }
  /* two columns, the same rigid grid */
  .lm-row-3 { grid-column-start: auto; } .lm-row-2 { grid-column-start: 1; }
  .lm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); --cell-h: 200px; column-gap: 16px; row-gap: 26px; padding: 4px var(--right) 24px var(--side); }
  .lm-tags { margin-top: .5em; }

  /* the sheet lies over the grid only while open (from the title or an entry); closed, nothing is
     left at the bottom of the screen and the grid runs to the foot of the page */
  .lm-panel:not(.is-open) { display: none; }
  .lm-panel {
    z-index: 5; top: auto; bottom: 0; left: 0; right: 0; width: auto; height: var(--sheet-h);
    padding: 16px var(--right) calc(14px + env(safe-area-inset-bottom, 0px)) var(--side);
    border-left: 0; background: var(--paper); box-shadow: 0 -1px 0 var(--hair); overflow: hidden;
  }
  /* the picture on the left, the note beside it on the right */
  .lm-item { display: grid; grid-template-columns: 46% minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 18px; }
  .lm-item__top { grid-column: 1 / -1; }
  .lm-item__pic { min-height: 0; margin: 12px 0 10px; }
  .lm-item__pic img, .lm-item__pic video { object-position: left top; }
  .lm-item__pic--none { display: none; }
  .lm-item__pic--none + .lm-item__text { grid-column: 1 / -1; }
  .lm-item__text { margin: 12px 0 10px; padding: 0; line-height: 1.5; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .lm-nav { padding-top: 8px; }
  .lm-nav__btn { height: 18px; }
  .lm-nav__btn svg { stroke-width: .55; }
  .lm-item__top, .lm-nav { font-size: .76em; }
  .lm-close { display: grid; place-items: center; position: absolute; z-index: 1; top: 12px; right: var(--right); width: 22px; height: 22px;
    padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
  .lm-close::after { content: ""; position: absolute; inset: -11px; }
  .lm-close svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; }
  .lm-close:active { opacity: .55; }
  .lm-close:focus-visible { outline: 1px dotted var(--ink); outline-offset: 4px; }
}
@media (prefers-reduced-motion: reduce) { .lm-pick img { transition: none; } }