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

/* Tabs as a quiet underline row, not pills. */
main[data-pool-layout="designed"] [role="tablist"] {
  display: flex;
  gap: 1.8rem;
  margin: 1.2rem 0 0;
  border-bottom: 1px solid var(--pool-line);
}
main[data-pool-layout="designed"] [role="tab"] {
  min-height: 44px;
  margin: 0 0 -1px;
  padding: .4rem 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--pool-soft);
  font: 500 1.35rem/1.2 var(--forest-display);
  letter-spacing: 0;
  text-transform: none;
}
main[data-pool-layout="designed"] [role="tab"]:hover { color: var(--pool-ink); background: none; }
main[data-pool-layout="designed"] [role="tab"][aria-selected="true"] {
  border-bottom-color: var(--pool-accent);
  background: none;
  color: var(--pool-ink);
}

/* Each panel: what the tool does, beside its catalog entry. */
main[data-pool-layout="designed"] [data-health-project] {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: calc(var(--pool-step) * 1.6);
  align-items: start;
  margin-top: 1.4rem;
}
main[data-pool-layout="designed"] [data-health-project] .pool-project { max-width: none; }
main[data-pool-layout="designed"] .pool-tool-lead {
  margin: 0;
  color: var(--pool-ink);
  font: 500 clamp(1.8rem, 3.2vw, 2.4rem)/1.12 var(--forest-display);
}
main[data-pool-layout="designed"] .pool-tool-copy p + p { margin-top: .7rem; color: var(--pool-soft); }
main[data-pool-layout="designed"] [data-health-project] .pool-project {
  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);
}
main[data-pool-layout="designed"] [data-health-project] .pool-project > h3 { margin: 0; font: 500 1.35rem/1.15 var(--forest-display); }
main[data-pool-layout="designed"] [data-health-project] .pool-status { 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"] [data-health-project] .pool-bindings { margin: 0; }
main[data-pool-layout="designed"] [data-health-project] .pool-bindings a {
  display: inline-block;
  padding: .2rem 0;
  border: 0;
  color: var(--pool-accent);
  font: 500 1rem/1.35 var(--forest-body);
  text-decoration: underline;
  text-underline-offset: .22em;
}
main[data-pool-layout="designed"] [data-health-project] .pool-bindings a::after { content: none; }
main[data-pool-layout="designed"] .pool-health-note { margin-top: 1.4rem !important; color: var(--pool-muted) !important; font-size: .98rem; }

/* In development, with FlowForm's real screen. */
main[data-pool-layout="designed"] .pool-forming--preview img {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  margin-top: 1.1rem;
  border: 1px solid var(--pool-line);
  border-radius: 10px;
}

@media (max-width: 820px) {
  main[data-pool-layout="designed"] [data-health-project] { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  main[data-pool-layout="designed"] [role="tablist"] { gap: 1.2rem; }
  main[data-pool-layout="designed"] [role="tab"] { font-size: 1.1rem; }
}

/* The older Health composition centred everything; the designed layout reads left. */
main[data-pool-id="health"][data-pool-layout="designed"],
main[data-pool-id="health"][data-pool-layout="designed"] * { text-align: start; }
main[data-pool-id="health"][data-pool-layout="designed"] > section > p,
main[data-pool-id="health"][data-pool-layout="designed"] > section > h2,
main[data-pool-id="health"][data-pool-layout="designed"] .pool-lede { margin-inline: 0; }
main[data-pool-id="health"][data-pool-layout="designed"] [role="tablist"] { justify-content: flex-start; }

/* 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; }

/* Instrument displays: each tab shows the tool's real screen in a clinic frame, with
 * the ECG trace of the pool's emblem running along its top edge. */
main[data-pool-layout="designed"] [data-health-project] {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: start;
}
main[data-pool-layout="designed"] [data-health-project] > .pool-instrument { grid-column: 1; grid-row: 1 / span 2; }
main[data-pool-layout="designed"] [data-health-project] > .pool-tool-copy { grid-column: 2; grid-row: 1; }
main[data-pool-layout="designed"] [data-health-project] > [data-project-details] { grid-column: 2; grid-row: 2; }
main[data-pool-layout="designed"] .pool-instrument {
  position: relative;
  margin: 0;
  padding: 26px 12px 12px;
  border: 1px solid color-mix(in srgb, var(--pool-accent) 30%, var(--pool-line));
  border-radius: 18px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10H150l8-7 6 15 6-17 6 9H400' fill='none' stroke='%2334d399' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 18px 6px / calc(100% - 36px) 14px no-repeat,
    radial-gradient(ellipse 80% 60% at 50% 0%, rgb(52 211 153 / .08), transparent 70%),
    #0b1215;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .04), 0 18px 40px rgb(0 0 0 / .35);
}
main[data-pool-layout="designed"] .pool-instrument img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgb(255 255 255 / .06);
}
main[data-pool-layout="designed"] .pool-instrument figcaption {
  margin: .6rem .2rem 0;
  color: var(--pool-muted);
  font: .9rem/1.4 var(--forest-sans);
}
main[data-pool-layout="designed"] .pool-evidence-label { margin-top: 1.1rem !important; color: var(--pool-ink) !important; font: 500 .98rem/1.3 var(--forest-sans); }
main[data-pool-layout="designed"] .pool-evidence-notes {
  display: grid;
  gap: .55rem;
  margin: .6rem 0 0;
  padding: 0;
  list-style: none;
}
main[data-pool-layout="designed"] .pool-evidence-notes li {
  padding-left: .9rem;
  border-left: 2px solid color-mix(in srgb, var(--pool-accent) 55%, transparent);
  color: var(--pool-soft);
  font-size: 1rem;
  line-height: 1.5;
}
main[data-pool-layout="designed"] [data-health-project] > [data-project-details] { margin-top: 1.2rem; }

@media (max-width: 820px) {
  main[data-pool-layout="designed"] [data-health-project] { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  main[data-pool-layout="designed"] [data-health-project] > :is(.pool-instrument, .pool-tool-copy, [data-project-details]) { grid-column: 1; grid-row: auto; }
}