/* MyMentorLLM: shared system. White / icy blue grounds, one electric-blue line. */
/* same-origin page changes cross-fade instead of jumping (Chrome, Edge; ignored elsewhere) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s;
  animation-timing-function:cubic-bezier(0.23,1,0.32,1)}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

:root{
  color-scheme:light;
  --white:#fff; --ice:#F4F8FD; --ice2:#E7F0FB; --mist:#D5E3F4;
  --ink:#16202E; --text:#354155; --muted:#5A687C;
  --blue:#1360F2; --blue-d:#0A4FD8; --blue-wash:#EAF2FF;
  --patient:#E0922A; --patientD:#9A5C10; --patientBG:#FCF3E3;
  --therapist:#52A877; --therapistD:#26724A; --therapistBG:#ECF6F0;
  --mentor:#5B8AD0; --mentorD:#2A569A; --mentorBG:#EAF1FB;
  --MDD:#01295F; --GAD:#E0922A; --BPD:#FD151B;
  --ok:#23794B; --no:#C8141A;
  --display:"Bricolage Grotesque","Atkinson Hyperlegible Next",system-ui,sans-serif;
  --sans:"Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1200px; --gut:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:#B7CBE8 var(--ice);-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{margin:0;background:var(--white);color:var(--text);font:17px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;caret-color:var(--blue);overflow-x:hidden}
::selection{background:#CADDFF;color:var(--ink)}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0;font-weight:600;
  letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
p{margin:0}
a{color:var(--blue-d);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
button{font:inherit;color:inherit;cursor:pointer}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.num{font-variant-numeric:tabular-nums lining-nums}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* language: every bilingual string ships twice, tagged data-l */
html[lang="en"] [data-l="it"], html[lang="it"] [data-l="en"]{display:none!important}

/* ── ethics bar ── */
.ethics{background:var(--ice2);color:var(--ink);font-size:14px;line-height:1.45}
.ethics .wrap{display:flex;align-items:center;gap:14px;padding-block:8px}
.ethics p{flex:1}
.ethics a{color:var(--ink);font-weight:700}
.ethics .x{flex:none;border:0;background:none;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;color:var(--muted)}
.ethics .x:hover{background:var(--white);color:var(--ink)}

/* ── nav ── */
.nav{position:sticky;top:0;z-index:40;background:var(--white);border-bottom:1px solid transparent;
  transition:border-color .3s;view-transition-name:site-nav}
.nav.scrolled{border-color:var(--mist)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:68px}
.brand{font-family:var(--display);font-weight:700;font-size:21px;color:var(--ink);
  text-decoration:none;letter-spacing:-.02em;margin-right:auto}
.brand b{color:var(--blue);font-weight:700}
.links{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.links a{color:var(--text);text-decoration:none;font-size:15.5px;padding:6px 0;
  background:linear-gradient(var(--blue),var(--blue)) 0 100%/0 1.5px no-repeat;
  transition:background-size .35s var(--ease),color .2s}
.links a:hover,.links a[aria-current="page"]{color:var(--ink);background-size:100% 1.5px}
.lang{display:flex;border:1px solid var(--mist);border-radius:999px;padding:3px}
.lang button{border:0;background:none;font-size:13px;font-weight:700;letter-spacing:.04em;
  padding:5px 11px;border-radius:999px;color:var(--muted)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.menu{display:none;border:0;background:none;width:44px;height:44px;margin-right:-10px}
@media (max-width:820px){
  .menu{display:grid;place-items:center;order:-1;margin-right:0}
  .links{position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:10px;background:var(--ice);
    border-bottom:1px solid var(--mist);padding:16px var(--gut) 22px;display:none;
    box-shadow:0 16px 32px -18px rgba(23,60,120,.25)}
  .nav.menu-open .links{display:flex}
  .links a{display:block;padding:14px 20px;font-size:16px;font-weight:700;color:var(--ink);
    background:var(--white);border:1.5px solid var(--mist);border-radius:16px;
    text-decoration:none;transition:border-color .2s,background .2s,color .2s}
  .links a:hover,.links a[aria-current="page"]{border-color:var(--blue);background:var(--blue-wash);color:var(--blue-d)}
  .nav .wrap{gap:12px}
}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:10px;font:700 16px/1 var(--sans);text-decoration:none;
  border-radius:999px;padding:15px 24px;border:1.5px solid transparent;
  transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn.primary{background:var(--blue);color:var(--white)}
.btn.primary:hover{background:var(--blue-d);color:var(--white)}
.btn.ghost{border-color:var(--mist);color:var(--ink);background:var(--white)}
.btn.ghost:hover{border-color:var(--blue);color:var(--blue-d)}
.btn:active{transform:scale(.98)}
.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* ── the line: swoosh ── */
/* decorative only (aria-hidden) but its box can overlap real content above it -- must never eat clicks */
.swoosh{display:block;width:100%;height:auto;overflow:visible;pointer-events:none}
.swoosh .haze{fill:none;stroke:var(--blue);stroke-width:12;opacity:.12;filter:blur(7px);vector-effect:non-scaling-stroke}
.swoosh .stroke{fill:none;stroke:var(--blue);stroke-width:1.75;stroke-linecap:round;vector-effect:non-scaling-stroke}
.swoosh .field{fill:var(--white)}
.draw .line{clip-path:inset(0 100% 0 0);animation:draw 2.4s .35s var(--ease) forwards}
@keyframes draw{to{clip-path:inset(0 0 0 0)}}

/* ── page head (inner pages) ── */
.pagehead{background:linear-gradient(180deg,var(--ice) 0%,var(--white) 100%);position:relative}
.pagehead .wrap{padding-top:clamp(48px,8vw,96px);padding-bottom:clamp(28px,4vw,40px)}
.pagehead h1{font-size:clamp(2.4rem,5.4vw,4.2rem);max-width:18ch}
.pagehead .lede{font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:60ch;margin-top:18px;color:var(--text)}
.pagehead .swoosh{margin-top:-10px}

/* ── sections ── */
.section{padding-block:clamp(64px,9vw,128px)}
.section h2{font-size:clamp(2rem,4vw,3.1rem);max-width:20ch}
.section .intro{max-width:62ch;margin-top:16px;font-size:1.1rem}
.ice{background:var(--ice)}

/* ── data loading / error states (explore + session, streamed from Hugging Face) ── */
.loading{padding:48px 0;text-align:center;color:var(--muted);font-size:15px}
.loaderr{padding:32px 0;text-align:center;color:var(--muted);font-size:15px}
.loaderr a{color:var(--blue-d)}
.loaderr button{border:1.5px solid var(--mist);background:var(--white);border-radius:999px;
  padding:6px 16px;font:700 14px var(--sans);color:var(--ink);transition:border-color .2s}
.loaderr button:hover{border-color:var(--blue);color:var(--blue-d)}

/* margin note: the supervisor's hand */
.mnote{font-size:14.5px;line-height:1.5;color:var(--blue-d);position:relative;padding-top:12px}
.mnote::before{content:"";position:absolute;top:0;left:0;width:28px;height:1.5px;background:var(--blue)}

/* ── footer ── */
.foot{background:var(--ink);color:#C7D2E2;font-size:15px;margin-top:0}
.foot .wrap{padding-block:56px 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot h3{font-family:var(--sans);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:12px}
.foot a{color:#fff}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot li{display:flex;align-items:center;gap:8px}
.ico{flex:none;width:16px;height:16px;fill:currentColor;opacity:.9}
/* open-data strip: dataset and analyses are public */
.open{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:14.5px;color:var(--muted);margin:clamp(28px,4vw,44px) 0}
.open a{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-weight:600;
  text-decoration:none;border:1px solid var(--mist);border-radius:999px;padding:6px 14px;background:var(--white)}
.open a:hover{border-color:var(--blue);color:var(--blue-d)}
.open .ico{width:15px;height:15px}
.open .mark{font-size:15px;line-height:1}
.foot .brand{color:#fff;display:inline-block;margin-bottom:12px}
.foot .fine{grid-column:1/-1;border-top:1px solid #2C3A50;padding-top:22px;font-size:13.5px;color:#9FB0C8}
@media (max-width:820px){.foot .wrap{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}

/* ── findings (home teaser + paper.html full results) ── */
.findings{margin-top:clamp(36px,5vw,64px);border-top:1px solid var(--mist)}
.finding{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:24px clamp(32px,5vw,72px);
  padding-block:clamp(32px,4vw,52px);border-bottom:1px solid var(--mist);align-items:center}
.finding h3{font-size:clamp(1.3rem,2.1vw,1.7rem);max-width:24ch}
.finding p{margin-top:12px;max-width:52ch}
.finding .srcl{display:inline-block;margin-top:14px;font-size:14.5px}
.finding.caveat h3{color:var(--blue-d)}
@media (max-width:900px){.finding{grid-template-columns:1fr}}

/* ── findings teaser (home): two columns, no citation links, centred CTA below ── */
.findings.teaser{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);border-top:none}
.findings.teaser .finding{display:block;border-bottom:none;padding-block:0}
.findings.teaser .finding h3{max-width:none}
.findings.teaser .finding > div:first-child{margin-bottom:16px}
@media (max-width:700px){.findings.teaser{grid-template-columns:1fr;gap:clamp(28px,5vw,40px)}}
.find-cta{text-align:center;margin-top:clamp(28px,4vw,40px)}
.chart{width:100%;height:auto;font-family:var(--sans);overflow:visible}
.chart .grid{stroke:var(--ice2);stroke-width:1}
.chart .tick{font-size:11.5px;fill:var(--muted)}
.chart .ref{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3}
.chart .refl{font-size:11.5px;fill:var(--ink);font-weight:700}
.chart .lab{font-size:12.5px;fill:var(--text)}
.chart .lab.hl{fill:var(--blue-d);font-weight:700} .chart .lab.human{fill:var(--ink);font-weight:700}
.chart .val{font-size:12.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.chart .val.hl{fill:var(--blue-d);font-weight:700} .chart .val.bad{fill:var(--no);font-weight:700}
.chart .dot{fill:#9DB3D2} .chart .dot.hl{fill:var(--blue)} .chart .dot.human{fill:var(--ink)} .chart .dot.bad{fill:var(--no)}
.chart .stem{stroke:#9DB3D2;stroke-width:2} .chart .stem.hl{stroke:var(--blue)} .chart .stem.bad{stroke:var(--no)}
.chart .from{fill:var(--white);stroke:#9DB3D2;stroke-width:1.5}
.chart .from.hl{stroke:var(--blue)} .chart .from.bad{stroke:var(--no)}
.chart .head{fill:#9DB3D2} .chart .head.hl{fill:var(--blue)} .chart .head.bad{fill:var(--no)}
.chart .off{fill:none;stroke:var(--mist);stroke-width:1.5}
.chart .on.MDD{fill:var(--MDD)} .chart .on.GAD{fill:var(--GAD)} .chart .on.BPD{fill:var(--BPD)}
.chart .dis{font-weight:700} .chart .dis.MDD{fill:var(--MDD)} .chart .dis.GAD{fill:#A8650F} .chart .dis.BPD{fill:#C8141A}
