/*
 * Designed pools: opt in with <main data-pool-layout="designed"> and this file.
 * The page leads with authored content about the work; the catalog becomes a
 * compact index whose audit record sits behind a per-project disclosure.
 * Inherits pool-page.css tokens (woodland, type voice, pool accent).
 */
.pool-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Wayfinding: a plain link, not a pill with a tracked caps label. */
body:has(main[data-pool-layout="designed"]) > header a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pool-soft);
  font: 500 1rem/1.2 var(--forest-sans);
  letter-spacing: 0;
  text-transform: none;
}
body:has(main[data-pool-layout="designed"]) > header a:hover { color: var(--pool-ink); background: none; }

main[data-pool-layout="designed"] {
  display: block;
  padding-bottom: calc(var(--pool-step) * 3);
}
main[data-pool-layout="designed"] > section:not([data-pool-overview]) { margin-top: calc(var(--pool-step) * 3.4); }
main[data-pool-layout="designed"] > section > h2::before { content: none; }
main[data-pool-layout="designed"] > section > h2 {
  margin: 0 0 .6rem;
  color: var(--pool-ink);
  font: 500 clamp(1.9rem, 3.2vw, 2.5rem)/1.1 var(--forest-display);
  letter-spacing: -.01em;
  text-transform: none;
}
main[data-pool-layout="designed"] > section > p { max-width: var(--pool-measure); color: var(--pool-soft); }

/* Threshold: name and what the pool is for, emblem to the side. */
main[data-pool-layout="designed"] .pool-threshold {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: calc(var(--pool-step) * 1.5);
  padding-top: calc(var(--pool-step) * 2.2);
}
main[data-pool-layout="designed"] .pool-threshold h1 { grid-column: 1; margin: 0; }
main[data-pool-layout="designed"] .pool-threshold [data-pool-overview] { grid-column: 1; margin: 0; }
main[data-pool-layout="designed"] .pool-threshold .pool-emblem {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 100%;
  max-width: 440px;
  margin: 0 0 0 auto;
}
main[data-pool-layout="designed"] .pool-lede {
  max-width: 34rem;
  margin: .9rem 0 0;
  color: var(--pool-ink);
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  line-height: 1.55;
}

/* Flagship: the pool's shipped product, with the real install line. */
main[data-pool-layout="designed"] .pool-flagship {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: calc(var(--pool-step) * 2);
  padding: calc(var(--pool-step) * 1.6);
  border: 1px solid color-mix(in srgb, var(--pool-accent) 26%, transparent);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 70% 90% at 0% 0%, color-mix(in srgb, var(--pool-accent) 9%, transparent), transparent 70%),
    rgba(10, 12, 20, .8);
}
main[data-pool-layout="designed"] .pool-flagship h2 {
  margin: 0;
  font: 500 clamp(2rem, 3.6vw, 2.8rem)/1.05 var(--forest-display);
}
main[data-pool-layout="designed"] .pool-flagship-copy > p { max-width: 36rem; margin: .8rem 0 0; color: var(--pool-soft); }
main[data-pool-layout="designed"] .pool-flagship-install { color: var(--pool-ink) !important; font-weight: 500; }
main[data-pool-layout="designed"] .pool-flagship pre {
  margin: .5rem 0 0;
  padding: .85rem 1rem;
  overflow-x: auto;
  border: 1px solid var(--pool-line);
  border-radius: 8px;
  background: rgba(4, 6, 10, .9);
  color: var(--pool-ink);
  font: .92rem/1.5 var(--forest-mono);
}
main[data-pool-layout="designed"] .pool-flagship-links {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.6rem;
  margin-top: 1.1rem !important;
}
main[data-pool-layout="designed"] .pool-flagship-links a,
main[data-pool-layout="designed"] .pool-reference h3 a,
main[data-pool-layout="designed"] .pool-rows a {
  display: inline-block;
  padding: .2rem 0;
  color: var(--pool-accent);
  text-decoration: underline;
  text-underline-offset: .25em;
}
main[data-pool-layout="designed"] .pool-flagship-facts {
  display: grid;
  align-content: start;
  gap: 1.2rem;
  margin: 0;
}
main[data-pool-layout="designed"] .pool-flagship-facts dt {
  color: var(--pool-ink);
  font: 500 2.2rem/1 var(--forest-display);
}
main[data-pool-layout="designed"] .pool-flagship-facts dd {
  margin: .3rem 0 0;
  color: var(--pool-soft);
  font-size: .98rem;
  line-height: 1.5;
}

/* References: two pages side by side, each showing its own shape. */
main[data-pool-layout="designed"] .pool-reference-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: calc(var(--pool-step) * 1.5);
  margin-top: 1.2rem;
}
main[data-pool-layout="designed"] .pool-reference {
  padding-top: 1rem;
  border-top: 2px solid color-mix(in srgb, var(--pool-accent) 55%, transparent);
}
main[data-pool-layout="designed"] .pool-reference h3 { margin: 0; font: 500 1.7rem/1.15 var(--forest-display); }
main[data-pool-layout="designed"] .pool-reference p { margin: .6rem 0 0; color: var(--pool-soft); }
main[data-pool-layout="designed"] .pool-anatomy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem 1.4rem;
  margin: 1rem 0 0;
}
main[data-pool-layout="designed"] .pool-anatomy dt { color: var(--pool-ink); font: 500 1.2rem/1.2 var(--forest-display); }
main[data-pool-layout="designed"] .pool-anatomy dd { margin: .15rem 0 0; color: var(--pool-muted); font-size: .95rem; }

/* Search and read: rows, not cards. */
main[data-pool-layout="designed"] .pool-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.3rem calc(var(--pool-step) * 2);
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}
main[data-pool-layout="designed"] .pool-rows li { display: grid; gap: .25rem; }
main[data-pool-layout="designed"] .pool-rows a { justify-self: start; font: 500 1.35rem/1.2 var(--forest-display); }
main[data-pool-layout="designed"] .pool-rows span:not(.pool-sr) { color: var(--pool-soft); font-size: .98rem; line-height: 1.5; }

/* Not public yet: stated plainly, no links. */
main[data-pool-layout="designed"] .pool-forming {
  padding: calc(var(--pool-step) * 1.2) calc(var(--pool-step) * 1.4);
  border-left: 2px solid color-mix(in srgb, var(--forest-amber) 60%, transparent);
  border-radius: 0 14px 14px 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--forest-amber) 8%, transparent), transparent 75%);
}
main[data-pool-layout="designed"] .pool-forming > h2 { color: var(--forest-amber); font-size: 1.7rem; }
main[data-pool-layout="designed"] .pool-forming dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem calc(var(--pool-step) * 1.6);
  margin: 1rem 0 0;
}
main[data-pool-layout="designed"] .pool-forming dt { color: var(--pool-ink); font: 500 1.25rem/1.2 var(--forest-display); }
main[data-pool-layout="designed"] .pool-forming dd { margin: .25rem 0 0; color: var(--pool-soft); font-size: .98rem; line-height: 1.5; }

/* The catalog index: compact entries; the audit record is one click away. */
main[data-pool-layout="designed"] .pool-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: .8rem;
  margin-top: 1.2rem;
}
main[data-pool-layout="designed"] .pool-index > div { display: flex; scroll-margin-top: 24px; }
main[data-pool-layout="designed"] .pool-index .pool-project {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--pool-line);
  border-radius: 10px;
  background: rgba(10, 12, 20, .72);
  box-shadow: none;
}
main[data-pool-layout="designed"] .pool-index .pool-project > h3 { font: 500 1.35rem/1.15 var(--forest-display); }
main[data-pool-layout="designed"] .pool-index .pool-status {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pool-muted);
  font: .9rem/1.3 var(--forest-sans);
  letter-spacing: 0;
  text-transform: none;
}
main[data-pool-layout="designed"] .pool-index .pool-bindings { margin: 0; }
main[data-pool-layout="designed"] .pool-index .pool-bindings li { margin: 0; font-size: .95rem; }
main[data-pool-layout="designed"] .pool-index .pool-bindings a {
  display: inline-block;
  padding: .2rem 0;
  border: 0;
  color: var(--pool-accent-2);
  font: 500 1rem/1.35 var(--forest-body);
  text-decoration: underline;
  text-underline-offset: .22em;
}
main[data-pool-layout="designed"] .pool-index .pool-bindings a::after { content: none; }

main[data-pool-layout="designed"] details > summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--pool-muted);
  font: .9rem/1.3 var(--forest-sans);
  cursor: pointer;
}
main[data-pool-layout="designed"] details > summary:hover { color: var(--pool-ink); }
main[data-pool-layout="designed"] .pool-record { margin-top: auto; }
main[data-pool-layout="designed"] .pool-record .pool-fieldnotes { padding-top: .3rem; }
main[data-pool-layout="designed"] .pool-record .pool-fieldnotes::before { content: none; }
main[data-pool-layout="designed"] .pool-fieldnotes .pool-tier { letter-spacing: 0; text-transform: none; font-size: .8rem; }
main[data-pool-layout="designed"] .pool-ledger-disclosure { margin-top: 1.4rem; }
main[data-pool-layout="designed"] .pool-ledger-disclosure .pool-ledger { margin-top: .6rem; }
main[data-pool-layout="designed"] .pool-reality h4 { letter-spacing: 0; text-transform: none; font-size: .9rem; }

@media (max-width: 820px) {
  main[data-pool-layout="designed"] .pool-threshold { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding-top: 1.2rem; }
  main[data-pool-layout="designed"] .pool-threshold .pool-emblem { grid-column: 1; grid-row: 1; max-width: 260px; margin: 0; }
  main[data-pool-layout="designed"] .pool-threshold h1 { grid-row: 2; }
  main[data-pool-layout="designed"] .pool-threshold [data-pool-overview] { grid-row: 3; }
  main[data-pool-layout="designed"] .pool-flagship,
  main[data-pool-layout="designed"] .pool-reference-pair,
  main[data-pool-layout="designed"] .pool-rows,
  main[data-pool-layout="designed"] .pool-forming dl { grid-template-columns: minmax(0, 1fr); }
  main[data-pool-layout="designed"] .pool-flagship { padding: 1.1rem; gap: 1.4rem; }
  main[data-pool-layout="designed"] .pool-flagship pre { font-size: .8rem; }
  main[data-pool-layout="designed"] > section:not([data-pool-overview]) { margin-top: calc(var(--pool-step) * 2.6); }
}

main[data-pool-layout="designed"] .pool-flagship-facts dt,
main[data-pool-layout="designed"] .pool-flagship pre { font-variant-numeric: lining-nums; }
main[data-pool-layout="designed"] { font-variant-numeric: lining-nums; }
main[data-pool-layout="designed"] details > summary { list-style: none; gap: .45rem; }
main[data-pool-layout="designed"] details > summary::-webkit-details-marker { display: none; }
main[data-pool-layout="designed"] details > summary::before {
  content: "";
  width: .45em;
  height: .45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s ease;
}
main[data-pool-layout="designed"] details[open] > summary::before { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  main[data-pool-layout="designed"] details > summary::before { transition: none; }
}
@media (max-width: 820px) {
  main[data-pool-layout="designed"] .pool-flagship pre { white-space: pre-wrap; overflow-wrap: anywhere; }
}