/* TinkerBox pool sections for the designed layout (see web/shared/pool-designed.css). */

/* Avatar: the real render beside what it is. */
main[data-pool-layout="designed"] .pool-avatar {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: calc(var(--pool-step) * 1.8);
  align-items: center;
}
main[data-pool-layout="designed"] .pool-avatar img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--pool-line);
  border-radius: 14px;
}
main[data-pool-layout="designed"] .pool-avatar h2 { margin: 0; }
main[data-pool-layout="designed"] .pool-councils > h2 { margin: 0 0 .6rem; }
main[data-pool-layout="designed"] .pool-avatar h2 a,
main[data-pool-layout="designed"] .pool-councils > h2 a {
  color: var(--pool-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
main[data-pool-layout="designed"] .pool-avatar h2 { font: 500 clamp(1.9rem, 3.2vw, 2.5rem)/1.1 var(--forest-display); }
main[data-pool-layout="designed"] .pool-avatar p { margin: .8rem 0 0; color: var(--pool-soft); }
main[data-pool-layout="designed"] .pool-avatar-note { color: var(--pool-muted) !important; font: .98rem/1.45 var(--forest-sans); }

/* Councils: two modes side by side, as definitions not cards. */
main[data-pool-layout="designed"] .pool-councils dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem calc(var(--pool-step) * 2);
  margin: 1.2rem 0 0;
}
main[data-pool-layout="designed"] .pool-councils dl > div {
  padding-top: .9rem;
  border-top: 2px solid color-mix(in srgb, var(--pool-accent) 50%, transparent);
}
main[data-pool-layout="designed"] .pool-councils dt { color: var(--pool-ink); font: 500 1.45rem/1.2 var(--forest-display); }
main[data-pool-layout="designed"] .pool-councils dd { margin: .35rem 0 0; color: var(--pool-soft); line-height: 1.55; }

@media (max-width: 820px) {
  main[data-pool-layout="designed"] .pool-avatar,
  main[data-pool-layout="designed"] .pool-councils dl { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* The thesis leads: what the pool is for, before anything it contains. */
main[data-pool-layout="designed"] .pool-thesis { padding:calc(var(--pool-step) * 1.6) 0 calc(var(--pool-step) * 1.2); border-block:1px solid var(--pool-line); }
main[data-pool-layout="designed"] .pool-thesis-lead { max-width:24ch !important; margin:.2rem 0 0 !important; color:var(--pool-ink) !important; font:500 clamp(1.9rem, 3.6vw, 2.8rem)/1.12 var(--forest-display); letter-spacing:-.01em; }
main[data-pool-layout="designed"] .pool-thesis p + p { margin-top:1rem; max-width:40rem; font-size:1.08rem; }
main[data-pool-layout="designed"] .pool-thesis-next { color:var(--pool-muted) !important; font:1rem/1.5 var(--forest-sans) !important; }

/* The bench: each tool laid out by its working parts, on a wooden rail with iron
 * clamps like the pool's emblem. */
main[data-pool-layout="designed"] .pool-bench {
  position: relative;
  padding: calc(var(--pool-step) * 1.4) calc(var(--pool-step) * 1.4) calc(var(--pool-step) * 1.2);
  border: 1px solid var(--pool-line);
  border-top: 6px solid #6b4f33;
  border-radius: 6px 6px 14px 14px;
  background: linear-gradient(180deg, rgb(107 79 51 / .12), transparent 120px), rgb(10 11 18 / .8);
}
main[data-pool-layout="designed"] .pool-bench::before,
main[data-pool-layout="designed"] .pool-bench::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 34px;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(#5b6168, #2f3439);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18);
}
main[data-pool-layout="designed"] .pool-bench::before { left: 18px; }
main[data-pool-layout="designed"] .pool-bench::after { right: 18px; }
main[data-pool-layout="designed"] .pool-bench-head h2 { margin: 0; font: 500 clamp(1.9rem, 3.2vw, 2.5rem)/1.1 var(--forest-display); }
main[data-pool-layout="designed"] .pool-bench-head h2 a { color: var(--pool-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
main[data-pool-layout="designed"] .pool-bench-head p { max-width: 42rem; margin: .7rem 0 0; color: var(--pool-soft); }
main[data-pool-layout="designed"] .pool-bench-parts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
}
main[data-pool-layout="designed"] .pool-bench-parts li { margin: 0; }
main[data-pool-layout="designed"] .pool-bench-parts img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--pool-line); }
main[data-pool-layout="designed"] .pool-bench-parts span { display: block; margin-top: .45rem; color: var(--pool-ink); font: 500 1.15rem/1.2 var(--forest-display); }
main[data-pool-layout="designed"] .pool-bench-note { margin: .9rem 0 0; color: var(--pool-muted) !important; font: .98rem/1.45 var(--forest-sans); }
main[data-pool-layout="designed"] .pool-bench-sub { margin: 1.4rem 0 0; color: var(--pool-ink); font: 500 1.3rem/1.25 var(--forest-display); }
main[data-pool-layout="designed"] .pool-bench--council > p:not(.pool-bench-note) { max-width: 42rem; margin: .5rem 0 0; color: var(--pool-soft); }
main[data-pool-layout="designed"] .pool-bench-roles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: .9rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
main[data-pool-layout="designed"] .pool-bench-roles li {
  position: relative;
  padding: .8rem .9rem;
  border: 1px solid var(--pool-line);
  border-left-width: 0;
  background: rgb(255 255 255 / .02);
}
main[data-pool-layout="designed"] .pool-bench-roles li:first-child { border-left-width: 1px; border-radius: 10px 0 0 10px; }
main[data-pool-layout="designed"] .pool-bench-roles li:last-child { border-radius: 0 10px 10px 0; }
main[data-pool-layout="designed"] .pool-bench-roles li + li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 1.5px solid var(--pool-accent);
  border-right: 1.5px solid var(--pool-accent);
  transform: translateY(-50%) rotate(45deg);
  background: #0c0d15;
}
main[data-pool-layout="designed"] .pool-bench-roles strong { display: block; color: var(--pool-ink); font: 500 1.15rem/1.2 var(--forest-display); }
main[data-pool-layout="designed"] .pool-bench-roles span { display: block; margin-top: .2rem; color: var(--pool-muted); font: .92rem/1.3 var(--forest-sans); }
main[data-pool-layout="designed"] .pool-bench + .pool-bench { margin-top: calc(var(--pool-step) * 2.4); }

@media (max-width: 820px) {
  main[data-pool-layout="designed"] .pool-bench-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  main[data-pool-layout="designed"] .pool-bench-parts span { font-size: .95rem; }
  main[data-pool-layout="designed"] .pool-bench-roles { grid-template-columns: minmax(0, 1fr); }
  main[data-pool-layout="designed"] .pool-bench-roles li { border-left-width: 1px; border-top-width: 0; }
  main[data-pool-layout="designed"] .pool-bench-roles li:first-child { border-top-width: 1px; border-radius: 10px 10px 0 0; }
  main[data-pool-layout="designed"] .pool-bench-roles li:last-child { border-radius: 0 0 10px 10px; }
  main[data-pool-layout="designed"] .pool-bench-roles li + li::before { left: 50%; top: -6px; transform: translateX(-50%) rotate(135deg); }
}