/* LATVERA lux selected-work routes (B15, lane D): #project-NN as an activity card, #projects as a type index.
 * Scoped to #detailContent:has(> .selected-work-detail-hero) and #detailContent:has(> .library-grid) (GRAMMAR §0) over the
 * untouched app.js markup (app.js:479-487); lux/routes.js adds the "Visualization" line, the chips and the route title.
 * Archetype: the activity card (ref:R4-extra/vc-shots-desktop/29_y13050.jpg; R3 §2.10; GRAMMAR §8.13) and the index rows
 * of the menu list (R3 §2.3; GRAMMAR §8.12). The close control is the shared "Close ×" pill (B0 primitives.css). */

/* ── #project-NN: one card in the 8 px frame, the copy laid over it (grid overlay) ─────────────────────────────────── */
#detailDialog #detailContent:has(> .selected-work-detail-hero) {
  display:grid; grid-template-columns:minmax(0, 1fr); gap:8px 0; padding:8px 8px calc(var(--lux-close) + 72px);
}
#detailContent:has(> .selected-work-detail-hero) #detailTitle:focus-visible { outline:none; box-shadow:none; }
#detailContent:has(> .selected-work-detail-hero) > .selected-work-detail-hero {
  grid-area:1 / 1; position:relative; width:100%; height:calc(100svh - 16px); max-height:none; margin:0;
  border-radius:var(--radius); overflow:hidden; background:var(--lux-panel);
}
#detailContent:has(> .selected-work-detail-hero) > .selected-work-detail-hero img {
  width:100%; height:100%; max-height:none; object-fit:cover; object-position:50% 50%;
}
#detailContent:has(> .selected-work-detail-hero) > .selected-work-detail-hero::before,
#detailContent:has(> .selected-work-detail-hero) > .selected-work-detail-hero::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
}
/* Top + left scrims under the title block (the airport's ceiling lights sit behind the city on #project-01: worst-10 %
 * was 2.31 with the top scrim alone, contrast.mjs); the bottom scrim carries the scope and the actions. */
#detailContent:has(> .selected-work-detail-hero) > .selected-work-detail-hero::before { background:var(--lux-scrim-top), var(--lux-scrim-left); }
#detailContent:has(> .selected-work-detail-hero) > .selected-work-detail-hero::after { background:var(--lux-scrim-bottom); }
/* Title top-left at the text edge, the city in brackets under it, the scope bottom-left (the activity card anatomy). */
#detailContent:has(> .selected-work-detail-hero) > .detail-intro {
  grid-area:1 / 1; position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:0;
  height:calc(100svh - 16px); margin:0; padding:calc(50 * var(--lux-unit)) calc(var(--lux-edge) - 8px); pointer-events:none;
}
#detailContent:has(> .selected-work-detail-hero) > .detail-intro > * { pointer-events:auto; }
#detailContent:has(> .selected-work-detail-hero) > .detail-intro #detailTitle {
  order:0; max-width:calc(900 * var(--lux-unit)); margin:0;
  font-size:var(--lux-fs-lead); line-height:1.04; letter-spacing:-.004em; font-weight:400; color:var(--lux-cream);
}
#detailContent:has(> .selected-work-detail-hero) > .detail-intro .eyebrow {
  order:1; grid-column:auto; margin:10px 0 0; font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em;
  text-transform:none; color:var(--lux-cream);
}
#detailContent:has(> .selected-work-detail-hero) > .detail-intro > p:not(.eyebrow) {
  order:2; max-width:calc(700 * var(--lux-unit)); margin:auto 0 0; text-wrap:balance;
  font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; color:var(--lux-cream);
}
/* Actions at the right, one row above the chips: the card's bottom band holds only the scope (left), the Close pill
 * (centre) and the chips (right), as the reference activity card holds a caption and chips beside the Menu pill. In the
 * band itself the pill sat 11–29 px off the Close pill's line and 17 px from it at 1024 (audit D2-M3). The row's bottom =
 * the chips' top (50u + 6 + 36 px) + 20 px. */
#detailContent:has(> .selected-work-detail-hero) > .detail-actions {
  grid-area:1 / 1; position:relative; z-index:3; align-self:end; justify-self:end; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:flex-end; gap:12px 24px; margin:0; padding:0 calc(var(--lux-edge) - 8px) calc(50 * var(--lux-unit) + 62px) 0;
}
/* The legacy pill keeps its own 99px stadium (rest and focus; b0 8b, audit D7): the same shape as the lux pill. */
#detailContent:has(> .selected-work-detail-hero) > .detail-actions .pill {
  display:inline-flex; align-items:center; gap:12px; box-sizing:border-box; height:48px; min-height:0; padding:12px 18px; border:0;
  border-radius:99px; background:var(--lux-cream); color:var(--ink); font-size:var(--lux-fs-pill); line-height:1.25; letter-spacing:0;
  box-shadow:none; white-space:nowrap; transition:background-color .2s var(--ease);
}
#detailContent:has(> .selected-work-detail-hero) > .detail-actions .pill .arrow {
  display:inline; width:auto; height:auto; border-radius:0; background:none; color:inherit; font-size:19px; line-height:1; transform:none;
  transition:transform .2s var(--ease);
}
#detailContent:has(> .selected-work-detail-hero) > .detail-actions .text-button {
  position:relative; display:inline-flex; align-items:center; min-height:44px; padding:0; border:0; background:none;
  font-size:var(--lux-fs-small); letter-spacing:-.015em; color:var(--lux-cream); text-transform:none;
}
#detailContent:has(> .selected-work-detail-hero) > .detail-actions .text-button::after {
  content:""; position:absolute; left:0; right:0; bottom:12px; height:1px; background:currentColor;
  transform-origin:0 50%; transition:transform .6s var(--lux-ease-out);
}
/* The additions of lux/routes.js: "Visualization" top-right (the reference's tag corner), chips bottom-right. */
/* The owner-sensitive disclosure (MASTER §11.8a) at ≥ 14 px at every width (B15 #2), above the dialog small role's 13 px
 * floor (it rendered 13 / 13.5 px at 1280 / 1440, audit D2-m1). */
#detailContent:has(> .selected-work-detail-hero) .lux-provenance {
  position:absolute; z-index:2; top:calc(50 * var(--lux-unit)); right:calc(var(--lux-edge) - 8px); margin:0; line-height:1.4;
  font-size:max(14px, var(--lux-fs-small)); color:var(--lux-cream);
}
#detailContent:has(> .selected-work-detail-hero) > .selected-work-detail-hero > .lux-chips {
  position:absolute; z-index:2; right:calc(var(--lux-edge) - 8px); bottom:calc(50 * var(--lux-unit) + 6px);
}
/* The other views: one column of full cards; the "· additional view" filler stays in each alt only. */
#detailContent:has(> .selected-work-detail-hero) > .selected-work-detail-gallery { min-width:0; }
#detailContent:has(> .selected-work-detail-hero) .selected-work-detail-gallery .detail-gallery {
  display:grid; grid-template-columns:minmax(0, 1fr); gap:8px; margin:0;
}
#detailContent:has(> .selected-work-detail-hero) .selected-work-detail-gallery figure {
  position:relative; height:calc(100svh - 16px); margin:0; border-radius:var(--radius); overflow:hidden; background:var(--lux-panel);
}
#detailContent:has(> .selected-work-detail-hero) .selected-work-detail-gallery figure::before {
  content:""; position:absolute; inset:0; z-index:1; background:var(--lux-scrim-top); pointer-events:none;
}
#detailContent:has(> .selected-work-detail-hero) .selected-work-detail-gallery img {
  width:100%; height:100%; aspect-ratio:auto; object-fit:cover; border-radius:0;
}
#detailContent:has(> .selected-work-detail-hero) .selected-work-detail-gallery figcaption { display:none; }

/* ── #projects: the library as a type index (no images) ─────────────────────────────────────────────────────────────── */
#detailDialog #detailContent:has(> .library-grid) { padding:var(--lux-close) var(--lux-edge) calc(var(--lux-close) + 72px); }
#detailContent:has(> .library-grid) #detailTitle:focus-visible { outline:none; box-shadow:none; }
#detailContent:has(> .library-grid) > .detail-intro {
  display:flex; flex-direction:column; align-items:flex-start; gap:0; margin:0 0 calc(140 * var(--lux-unit));
}
#detailContent:has(> .library-grid) > .detail-intro .eyebrow {
  margin:0 0 calc(50 * var(--lux-unit)); font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em;
  text-transform:none; color:var(--lux-cream);
}
#detailContent:has(> .library-grid) > .detail-intro #detailTitle {
  margin:0; font-size:var(--lux-fs-mega); line-height:.94; letter-spacing:-.06em; font-weight:400; color:var(--lux-cream);
}
#detailContent:has(> .library-grid) > .library-grid { display:block; margin:0; border-bottom:1px solid var(--lux-hair); }
#detailContent:has(> .library-grid) .library-card {
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); grid-template-rows:auto auto; column-gap:calc(40 * var(--lux-unit));
  align-items:baseline; width:100%; min-height:44px; padding:calc(30 * var(--lux-unit)) 0; border:0; border-top:1px solid var(--lux-hair);
  background:none; color:var(--lux-taupe); text-align:left;
}
#detailContent:has(> .library-grid) .library-card img { display:none; }
#detailContent:has(> .library-grid) .library-card h3 {
  grid-column:1; grid-row:1; margin:0; font-size:var(--lux-fs-lead); line-height:1.04; letter-spacing:-.004em; font-weight:400;
  color:var(--lux-taupe); transition:color .3s var(--lux-ease-ui);
}
#detailContent:has(> .library-grid) .library-card h3 > span[aria-hidden] {
  font-size:.53em; vertical-align:.35em; color:var(--lux-cream); opacity:0; transition:opacity .3s var(--lux-ease-ui);
}
#detailContent:has(> .library-grid) .library-card > p {
  margin:0; font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; color:var(--lux-taupe);
}
#detailContent:has(> .library-grid) .library-card > p:nth-of-type(1) { grid-column:1; grid-row:2; margin-top:8px; }
#detailContent:has(> .library-grid) .library-card > p:nth-of-type(2) { grid-column:2; grid-row:1 / 3; align-self:start; max-width:calc(620 * var(--lux-unit)); padding-top:.6em; }
#detailContent:has(> .library-grid) .library-card:is(:focus-visible) h3 { color:var(--lux-cream); }
#detailContent:has(> .library-grid) .library-card:is(:focus-visible) h3 > span[aria-hidden] { opacity:1; }

@media (hover:hover) and (pointer:fine) {
  #detailContent:has(> .selected-work-detail-hero) > .detail-actions .pill:hover { background:var(--lux-pill-hover); color:var(--ink); }
  #detailContent:has(> .selected-work-detail-hero) > .detail-actions .pill:hover .arrow { transform:translate(2px, -2px); }
  :where(html.is-motion) #detailContent:has(> .selected-work-detail-hero) > .detail-actions .text-button:hover::after { transform-origin:100% 50%; transform:scaleX(0); }
  #detailContent:has(> .library-grid) .library-card:hover h3 { color:var(--lux-cream); }
  #detailContent:has(> .library-grid) .library-card:hover h3 > span[aria-hidden] { opacity:1; }
}

/* ── Density step and phone: the reference phone activity card — image 1.4:1, chips over it, the copy below ───────── */
/* ≤ 900 (the touch query's width, GRAMMAR §8.13 "phone / touch query"): the reference phone activity card — the image at
 * 1.4:1 with "Visualization" and the chips over it, then title, city, scope and the actions below it on the ground, in
 * one column above the Close pill lane. At 701–900 the overlay card crowded its bottom band: two cream pills 31 px apart,
 * the actions box inside the Close pill's horizontal range (D-m7). */
@media (max-width:900px) {
  #detailDialog #detailContent:has(> .selected-work-detail-hero) { display:block; padding:8px 8px 132px; }
  #detailContent:has(> .selected-work-detail-hero) > .selected-work-detail-hero { height:auto; aspect-ratio:1.4; }
  #detailContent:has(> .selected-work-detail-hero) > .detail-intro { height:auto; padding:22px calc(var(--lux-edge) - 8px) 0; pointer-events:auto; }
  #detailContent:has(> .selected-work-detail-hero) > .detail-intro #detailTitle,
  #detailContent:has(> .selected-work-detail-hero) > .detail-intro > p:not(.eyebrow) { max-width:none; }
  #detailContent:has(> .selected-work-detail-hero) > .detail-intro .eyebrow { margin-top:8px; color:var(--lux-taupe); }
  #detailContent:has(> .selected-work-detail-hero) > .detail-intro > p:not(.eyebrow) { margin-top:14px; color:var(--lux-taupe); }
  /* justify-self:start — the overlay card's end alignment (above) also applies to a block box in Chromium 153. */
  #detailContent:has(> .selected-work-detail-hero) > .detail-actions { justify-self:start; align-self:auto; justify-content:flex-start; padding:20px calc(var(--lux-edge) - 8px) 0; }
  #detailContent:has(> .selected-work-detail-hero) .lux-provenance { top:16px; right:16px; }
  #detailContent:has(> .selected-work-detail-hero) > .selected-work-detail-hero > .lux-chips { right:16px; bottom:16px; }
  #detailContent:has(> .selected-work-detail-hero) > .selected-work-detail-gallery { margin-top:40px; }
  #detailContent:has(> .selected-work-detail-hero) .selected-work-detail-gallery figure { height:auto; aspect-ratio:1.4; }
}
@media (max-width:700px) {
  #detailDialog #detailContent:has(> .library-grid) { padding:var(--lux-close) var(--lux-edge) 132px; }
  #detailContent:has(> .library-grid) > .detail-intro { margin-bottom:56px; }
  #detailContent:has(> .library-grid) > .detail-intro .eyebrow { margin-bottom:30px; }
  #detailContent:has(> .library-grid) .library-card { grid-template-columns:minmax(0, 1fr); padding:18px 0; }
  #detailContent:has(> .library-grid) .library-card > p:nth-of-type(2) { grid-column:1; grid-row:3; max-width:none; margin-top:8px; padding-top:0; }
  #detailContent:has(> .library-grid) .library-card h3 > span[aria-hidden] { display:none; }
}