/* css/layout.css — desktop space use. Loaded last; only widths, grids and stickiness live here.
   <=759px is deliberately untouched. Bottom-right 240x180 is kept clear for the floating taste map. */

:root {
  --lay-gutter: clamp(16px, 2.4vw, 32px);
  --lay-nav: 72px;          /* sticky nav height + breathing room */
  --lay-zone-w: 240px;      /* taste-map widget footprint */
  --lay-zone-h: 180px;
}

/* ---------- shell: 760-1099 gets a little more room, >=1100 the wide shell ---------- */
@media (min-width: 900px) {
  .top, #view, .foot { max-width: min(1000px, 100%); }
  .tabs { max-width: min(1000px, calc(100% - 2 * var(--lay-gutter) + 32px)); }
  html { scroll-padding-bottom: calc(var(--lay-zone-h) + 16px); }
}
@media (min-width: 1100px) {
  .top, #view, .foot { max-width: 1240px; padding-inline: var(--lay-gutter); }
  .tabs { max-width: min(1240px, calc(100% - 2 * var(--lay-gutter) + 32px)); }
  #view { padding-bottom: 36px; }
}
@media (min-width: 1440px) {
  .top, #view, .foot { max-width: 1320px; }
  .tabs { max-width: min(1320px, calc(100% - 2 * var(--lay-gutter) + 32px)); }
}

/* prose stays readable inside wide cards */
@media (min-width: 760px) {
  #view .card p:not(.disclaimer), #view .card li { max-width: 75ch; }
  #view .card .chips, #view .card .chip, #view .card .small, #view .card .tiny { max-width: none; }
}

/* ======================= FOR YOU ======================= */
@media (min-width: 1000px) {
  /* picker: creators left, vibes + concerns right */
  .tab-foryou { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: 16px; }
  .tab-foryou > header,
  .tab-foryou > .fy-actions,
  .tab-foryou > .fy-yours,
  .tab-foryou > .fy-explain,
  .tab-foryou > .fy-list,
  .tab-foryou > .disclaimer { grid-column: 1 / -1; }
  .tab-foryou > section[aria-labelledby="fy-h-creators"] { grid-column: 1; grid-row: 2; }
  .tab-foryou > section[aria-labelledby="fy-h-vibes"] { grid-column: 1; grid-row: 3; }
  .tab-foryou > section[aria-labelledby="fy-h-concerns"] { grid-column: 2; grid-row: 2 / span 2; align-self: stretch; align-content: start; }
  .tab-foryou > .fy-actions { grid-row: 4; }
  /* results: the #1 pick leads full width, the rest tile */
  .tab-foryou > .fy-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  .tab-foryou > .fy-list > .fy-hero { grid-column: 1 / -1; }
  .tab-foryou > .fy-list > .fy-rec:not(.fy-hero) { align-content: start; }
}
@media (min-width: 1100px) {
  .tab-foryou > .fy-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tab-foryou > .fy-yours { align-items: center; }

/* ======================= MY CARD ======================= */
@media (min-width: 1000px) {
  .tab-card .gc-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px; }
}
@media (min-width: 1100px) {
  .tab-card .gc-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); }
  .tab-card .gc-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-content: start; }
  .tab-card .gc-card > .gc-cardtop { grid-column: 1 / -1; }
  .tab-card .gc-card > .gc-stage { grid-column: 1; grid-row: 2; }
  .tab-card .gc-card > .gc-capwrap { grid-column: 1; grid-row: 3; }
  .tab-card .gc-card > .gc-vibe { grid-column: 2; grid-row: 2 / span 2; align-self: center; grid-template-columns: minmax(0, 1fr); border-top: 0; padding-top: 0; gap: 18px; }
  .tab-card .gc-card > .gc-actions { grid-column: 1 / -1; grid-row: 4; }
  .tab-card .gc-radar svg { max-width: 320px; }
}

/* ======================= PROOF ======================= */
@media (min-width: 1100px) {
  .tab-proof { grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); align-items: start; gap: 16px 20px; }
  .tab-proof > .pf-intro,
  .tab-proof > .pf-stage { grid-column: 1 / -1; }
  .tab-proof > .pf-check { grid-column: 1; grid-row: 3; }
  .tab-proof > .pf-skin { grid-column: 1; grid-row: 4; }
  .tab-proof > .pf-result { grid-column: 2; grid-row: 3 / span 3; min-width: 0; }
  .tab-proof .pf-inputrow { flex-wrap: wrap; }
  .tab-proof .pf-inputrow .input { flex: 1 1 100%; }
  .tab-proof .pf-inputrow .btn { flex: 1 1 auto; }
  .tab-proof .pf-skin-row { grid-template-columns: 1fr; }

  /* verdict: identity + routes stacked beside the signals; formula fit runs full width */
  .tab-proof .pf-blocks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tab-proof .pf-b1 { grid-column: 1; grid-row: 1; }
  .tab-proof .pf-b3 { grid-column: 1; grid-row: 2; }
  .tab-proof .pf-b2 { grid-column: 2; grid-row: 1 / span 2; border-top: 0; border-left: 1px solid var(--line); }
  .tab-proof .pf-b4 { grid-column: 1 / -1; grid-row: 3; }
  .tab-proof .pf-b4 {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; align-content: start;
  }
  .tab-proof .pf-b4 > h3,
  .tab-proof .pf-b4 > .pf-spec-bar,
  .tab-proof .pf-b4 > .pf-spec { grid-column: 1 / -1; }
  .tab-proof .pf-b4 > .pf-prof { grid-column: 1 / -1; }
  .tab-proof .pf-b4 > .pf-notes { grid-column: 1 / -1; }
  .tab-proof .pf-b4 > .pf-clear,
  .tab-proof .pf-b4 > .pf-hl-wrap { grid-column: 1; }
  .tab-proof .pf-b4 > .pf-cohort { grid-column: 2; align-self: start; }
}

/* ======================= CHECK-IN ======================= */
@media (min-width: 1000px) {
  .tab-checkin .ck-layout { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; }
}
@media (min-width: 1100px) {
  /* no sticky here: the results column is taller than the space above the taste-map zone */
  .tab-checkin .ck-side { display: contents; }
  .tab-checkin .ck-form { grid-column: 1; grid-row: 1; }
  .tab-checkin .ck-results { grid-column: 2; grid-row: 1 / span 2; }
  .tab-checkin .ck-history { grid-column: 1; grid-row: 2; }
  .tab-checkin .ck-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; row-gap: 16px; align-content: start; }
  .tab-checkin .ck-form > .ck-fieldset:nth-of-type(1) { grid-column: 1 / -1; }
  .tab-checkin .ck-form > .ck-fieldset:nth-of-type(2) { grid-column: 1; grid-row: 2; }
  .tab-checkin .ck-form > .ck-fieldset:nth-of-type(4) { grid-column: 1; grid-row: 3; }
  .tab-checkin .ck-form > .ck-fieldset:nth-of-type(3) { grid-column: 2; grid-row: 2 / span 2; }
  .tab-checkin .ck-form > .ck-submitrow { grid-column: 1 / -1; grid-row: 4; }
}

/* ======================= CLINICS ======================= */
@media (min-width: 900px) {
  .tab-clinics .dossiers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; align-items: stretch; }
  /* shared rows so "Quick checks", "Things to check", "Questions" line up across the two dossiers */
  @supports (grid-template-rows: subgrid) {
    .tab-clinics .dossiers { grid-auto-rows: auto; }
    .tab-clinics .dossier { grid-row: span 7; grid-template-rows: subgrid; row-gap: 18px; }
  }
}

/* ======================= ASK ======================= */
@media (min-width: 1000px) {
  .tab-ask .ak-chat { grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 0 20px; align-items: stretch; min-height: 300px; }
  .tab-ask .ak-log { align-content: start; }
  .tab-ask .ak-suggest {
    flex-direction: column; flex-wrap: nowrap; align-content: stretch; align-self: start;
    border-top: 0; border-left: 1px dashed var(--line); padding: 0 0 0 20px;
  }
  .tab-ask .ak-suggest .chip { white-space: normal; border-radius: 16px; min-height: 44px; }
  .tab-ask .ak-lede { max-width: 75ch; }
  .tab-ask .ak-research-bar { padding-top: 4px; }
  .tab-ask .ak-research { max-width: none; }
}
@media (min-width: 1100px) {
  /* research replay: steps left, tagged claims right, the friendly answer runs full width */
  .tab-ask .ak-rsteps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 28px; align-items: start; }
  .tab-ask .ak-rsteps > .ak-rq,
  .tab-ask .ak-rsteps > .ak-answer { grid-column: 1 / -1; }
  .tab-ask .ak-rsteps > .ak-steplist { grid-column: 1; grid-row: 2 / span 2; }
  .tab-ask .ak-rsteps > .ak-chead { grid-column: 2; grid-row: 2; margin: 0; }
  .tab-ask .ak-rsteps > .ak-claims { grid-column: 2; grid-row: 3; }
}

/* ---------- keep the sticky nav above any sticky panel ---------- */
@media (min-width: 760px) {
  .tabs { z-index: 40; }
  .tab-proof .pf-stage { top: var(--lay-nav); }
}

/* ---------- never scroll sideways ---------- */
@media (min-width: 760px) {
  body { overflow-x: clip; }
  #view, #view > * { min-width: 0; }
}

/* For You: Glowy floats at the right of the title so it no longer stretches the header */
@media (min-width: 1000px) {
  .tab-foryou > header.gp3d-droplet-host { display: block; position: relative; padding-right: 200px; }
  .tab-foryou > header > .gp3d-droplet--hero { position: absolute; right: 12px; top: 50%; translate: 0 -50%; width: 150px; }
  .tab-foryou:has(> .fy-list) > header > .gp3d-droplet--hero { top: 0; translate: 0 -12%; width: 140px; }
  .tab-foryou:has(> .fy-list) > .fy-yours { padding-right: 180px; }
}