/* ==========================================================================
   תפריט הטיפולים — the clinic's treatment menu (/treatments)
   ==========================================================================
   treatments.js renders the page into #treatPage. The Clinical language of
   pearl-v6.css (its --ed-* tokens): a white page, pearl panels, navy ink and
   one steel-blue accent; IBM Plex Sans Hebrew at 200 for display and 300 for
   reading; Archivo for the Latin treatment names.
   One bold moment, the menu in the hero (its round lenses focus in when the
   page opens); everything after it stays quiet.
   Traps: style.css sizes every h2 with !important and pads every <section>
   (the page uses divs), and the legacy h1–h3 rules set colour and weight. */

/* ---------- the view ---------- */
/* a page, not a dialog: it sits below the other full-screen views (300) so the personal area, the policies or a product open above it */
#treatPage{z-index:290;color:var(--ed-ink);background:var(--ed-paper)!important;
  --tm-ih:52px;scroll-padding-top:calc(var(--tm-y0,0px) + var(--tm-ih) + 12px)}
#treatPage .tm{position:relative;z-index:1;overflow-x:clip}
#treatPage .tm-wrap{width:100%;max-width:var(--ed-max);margin-inline:auto;padding-inline:var(--ed-gutter);box-sizing:border-box}
#treatPage .tm-lat{font-family:var(--ed-latin);font-variation-settings:"wdth" 100}
#treatPage .tm-lat sub{font-size:.56em;line-height:0;vertical-align:-.28em;margin-inline-start:.04em}
#treatPage [tabindex="-1"]:focus{outline:none}
#treatPage p{max-width:none}

/* ---------- the hero: the title beside the menu ---------- */
#treatPage .tm-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(44px,6vw,96px);align-items:start;
  padding-block:clamp(36px,4.6vw,72px) clamp(64px,8vw,120px)}
#treatPage .tm-eyebrow{display:flex;align-items:center;gap:.7em;margin:0;font:400 .8rem/1.3 var(--ed-sans);color:var(--ed-muted)}
#treatPage .tm-eyebrow .tm-lat{font-size:.72rem;letter-spacing:.32em;font-variation-settings:"wdth" 118;color:var(--ed-ink)}
#treatPage .tm-h1{margin:clamp(18px,2.2vw,30px) 0 0;font-family:var(--ed-serif)!important;font-weight:200!important;letter-spacing:0;
  font-size:clamp(3.4rem,1.15rem + 6.4vw,7.6rem)!important;line-height:.98!important;color:var(--ed-ink)!important}
#treatPage .tm-story{margin:clamp(22px,2.6vw,34px) 0 0;max-width:24ch;font:300 clamp(1.3rem,1.02rem + 1vw,1.95rem)/1.42 var(--ed-sans);color:var(--ed-ink);text-wrap:balance}
#treatPage .tm-intro{margin-top:clamp(28px,3.4vw,44px);max-width:60ch;display:grid;gap:1.05em}
#treatPage .tm-intro p{margin:0;font:300 clamp(1rem,.96rem + .14vw,1.075rem)/1.85 var(--ed-sans);color:var(--ink);text-wrap:pretty}
#treatPage .tm-intro .tm-lat{font-size:.86em;letter-spacing:.12em}

/* the menu */
#treatPage .tm-menu__h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0 0 14px;
  font:500 .82rem/1.3 var(--ed-sans)!important;font-size:.82rem!important;line-height:1.3!important;letter-spacing:0;color:var(--ed-muted)!important}
#treatPage .tm-menu__n{font:400 .74rem/1 var(--ed-latin);letter-spacing:.16em;color:var(--ed-muted)}
#treatPage .tm-menu__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ed-line)}
#treatPage .tm-item{position:relative;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(14px,1.6vw,22px);
  min-height:88px;padding:12px clamp(4px,.8vw,12px);border-bottom:1px solid var(--ed-line);color:var(--ed-ink);text-decoration:none}
#treatPage .tm-item::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:linear-gradient(to left,var(--ed-ivory),rgba(241,245,248,0) 88%)}
#treatPage .tm-item:hover::before{opacity:1}
#treatPage .tm-item:focus-visible{outline:2px solid var(--ed-ink);outline-offset:-2px;border-radius:var(--ed-radius-sm)}
/* the lens: a round window onto the treatment's art, set in a fine double bezel */
#treatPage .tm-lens{position:relative;flex:none;width:clamp(54px,4.6vw,64px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--ed-ivory);
  box-shadow:0 0 0 1px rgba(15,30,46,.1),0 0 0 4px #FFFFFF,0 0 0 5px rgba(15,30,46,.07);transition:box-shadow .35s ease}
#treatPage .tm-lens img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .9s var(--ed-ease)}
#treatPage .tm-lens::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.42),rgba(255,255,255,0) 46%);mix-blend-mode:screen}
#treatPage .tm-item:hover .tm-lens,#treatPage .tm-item:focus-visible .tm-lens{box-shadow:0 0 0 1px rgba(15,30,46,.1),0 0 0 4px #FFFFFF,0 0 0 5px var(--ed-bronze)}
#treatPage .tm-item:hover .tm-lens img,#treatPage .tm-item:focus-visible .tm-lens img{transform:scale(1.16)}
#treatPage .tm-item__txt{display:grid;gap:3px;min-width:0}
#treatPage .tm-item__name{font:300 clamp(1.12rem,1rem + .45vw,1.36rem)/1.25 var(--ed-sans);color:var(--ed-ink);transition:color .3s ease}
#treatPage .tm-item__name .tm-lat{font-weight:300;letter-spacing:.005em}
#treatPage .tm-item:hover .tm-item__name{color:var(--ed-bronze)}
#treatPage .tm-item__sum{font:300 .88rem/1.55 var(--ed-sans);color:var(--ed-muted);text-wrap:pretty}
#treatPage .tm-item__no{align-self:start;padding-top:.45em;font:400 .74rem/1 var(--ed-latin);letter-spacing:.14em;color:var(--ed-muted);font-variant-numeric:tabular-nums}

/* the one entrance: the title rises, the rows follow, and each lens pulls into focus */
@media (prefers-reduced-motion:no-preference){
  #treatPage .tm-hero.is-enter .tm-rise{animation:tm-rise .95s var(--ed-ease) both;animation-delay:calc(var(--d,0) * 1ms)}
  #treatPage .tm-hero.is-enter .tm-item{animation:tm-rise .8s var(--ed-ease) both;animation-delay:calc(300ms + var(--i,0) * 70ms)}
  #treatPage .tm-hero.is-enter .tm-lens img{animation:tm-focus 1.25s var(--ed-ease) both;animation-delay:calc(380ms + var(--i,0) * 70ms)}
}
@keyframes tm-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes tm-focus{from{opacity:.25;filter:blur(7px) saturate(.6);transform:scale(1.4)}to{opacity:1;filter:none;transform:scale(1.02)}}

/* ---------- the index: slim, under the header, from the first chapter to the last ---------- */
#treatPage .tm-index{position:fixed;z-index:5;top:var(--tm-top,var(--headerh,76px));left:var(--tm-sbw,0px);right:0;height:var(--tm-ih);
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--ed-line);
  visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .3s ease,transform .4s var(--ed-ease),visibility 0s linear .4s}
#treatPage .tm-index.is-on{visibility:visible;opacity:1;transform:none;transition:opacity .3s ease,transform .4s var(--ed-ease),visibility 0s}
#treatPage .tm-index__in{display:flex;align-items:center;gap:2px;height:100%;max-width:var(--ed-max);margin-inline:auto;box-sizing:border-box;
  padding-inline:calc(var(--ed-gutter) - 8px);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
#treatPage .tm-index__in::-webkit-scrollbar{display:none}
#treatPage .tm-index__in>:first-child{margin-inline-start:auto}
#treatPage .tm-index__in>:last-child{margin-inline-end:auto}
#treatPage .tm-index a{position:relative;flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;white-space:nowrap;
  font:400 .84rem/1 var(--ed-sans);color:var(--ed-muted);text-decoration:none;transition:color .25s ease}
#treatPage .tm-index a .tm-lat{font-size:.94em;letter-spacing:.01em}
#treatPage .tm-index a::after{content:"";position:absolute;inset-inline:12px;bottom:7px;height:2px;border-radius:2px;background:var(--ed-bronze);
  transform:scaleX(0);transition:transform .35s var(--ed-ease)}
#treatPage .tm-index a:hover{color:var(--ed-ink)}
#treatPage .tm-index a[aria-current="true"]{color:var(--ed-ink);font-weight:500}
#treatPage .tm-index a[aria-current="true"]::after{transform:none}
#treatPage .tm-index a:focus-visible{outline:2px solid var(--ed-ink);outline-offset:-4px;border-radius:var(--ed-radius-sm)}

/* ---------- a chapter for each treatment ---------- */
#treatPage .tm-ch{border-top:1px solid var(--ed-line);scroll-margin-top:calc(var(--tm-y0,0px) + var(--tm-ih) + 18px)}
#treatPage .tm-ch__in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vw,36px);padding-block:clamp(48px,7vw,120px)}
/* the art melts into the page: no box, the edges fade to white */
#treatPage .tm-ch__art{position:relative;margin:0 calc(-1 * var(--ed-gutter))}
#treatPage .tm-ch__art img{display:block;width:100%;height:auto;aspect-ratio:900/896;opacity:0;transition:opacity .7s ease;
  -webkit-mask-image:radial-gradient(closest-side at 50% 52%,#000 62%,rgba(0,0,0,.6) 82%,transparent 100%);
  mask-image:radial-gradient(closest-side at 50% 52%,#000 62%,rgba(0,0,0,.6) 82%,transparent 100%)}
#treatPage .tm-ch__art img.is-in{opacity:1}
#treatPage .tm-ch__body{container-type:inline-size;min-width:0}
/* "01 / 08" reads left to right, at the start (right) of the column */
#treatPage .tm-ch__no{direction:ltr;display:flex;justify-content:flex-end;align-items:baseline;gap:.5em;margin:0 0 16px;
  font:400 .78rem/1 var(--ed-latin);letter-spacing:.16em;color:var(--ed-muted);font-variant-numeric:tabular-nums}
#treatPage .tm-ch__no b{font-weight:400;color:var(--ed-bronze)}
#treatPage .tm-ch__name{margin:0;font-family:var(--ed-serif)!important;font-weight:200!important;letter-spacing:0;color:var(--ed-ink)!important;
  font-size:clamp(2.4rem,1.3rem + 3vw,4.4rem)!important;line-height:1.04!important;text-wrap:balance}
#treatPage .tm-ch__name .tm-lat{font-weight:200;letter-spacing:-.01em}
#treatPage .tm-ch__tag{margin:14px 0 0;max-width:28ch;font:300 clamp(1.2rem,1.02rem + .7vw,1.6rem)/1.42 var(--ed-sans);color:var(--ed-ink);text-wrap:balance}
#treatPage .tm-label{margin:0 0 10px;font:500 .8rem/1.3 var(--ed-sans)!important;font-size:.8rem!important;line-height:1.3!important;letter-spacing:0;color:var(--ed-bronze)!important}
#treatPage .tm-know{margin-top:clamp(28px,3.4vw,40px);padding-inline-start:clamp(16px,1.8vw,24px);border-inline-start:2px solid var(--ed-bronze)}
#treatPage .tm-know p{margin:0;max-width:58ch;font:300 clamp(1.06rem,.98rem + .3vw,1.24rem)/1.75 var(--ed-sans);color:var(--ed-ink);text-wrap:pretty}
#treatPage .tm-two{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;margin-top:clamp(30px,3.4vw,42px)}
#treatPage .tm-two p,#treatPage .tm-qa dd{margin:0;font:300 1rem/1.85 var(--ed-sans);color:var(--ink);text-wrap:pretty}
#treatPage .tm-qa{margin-top:clamp(32px,3.6vw,46px)}
#treatPage .tm-qa dl{margin:0;border-top:1px solid var(--ed-line)}
#treatPage .tm-qa__i{display:grid;gap:4px;padding:15px 0;border-bottom:1px solid var(--ed-line)}
#treatPage .tm-qa dt{font:500 .98rem/1.55 var(--ed-sans);color:var(--ed-ink)}
#treatPage .tm-qa dd{font-size:.97rem;line-height:1.75}
@container (min-width:600px){
  #treatPage .tm-two{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
  #treatPage .tm-qa__i{grid-template-columns:minmax(0,.36fr) minmax(0,1fr);gap:28px;align-items:baseline}
}
#treatPage .tm-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:clamp(30px,3.4vw,42px)}
#treatPage .tm-acts .btn{min-height:48px;padding-inline:1.6rem;gap:.55rem;font-size:.88rem}
#treatPage .tm-ico{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- aftercare: the personal summary on a paper card ---------- */
#treatPage .tm-after{background:var(--ed-ivory);padding-block:clamp(64px,9vw,136px) 0}
#treatPage .tm-after__in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3vw,40px)}
#treatPage .tm-h2{margin:0;font-family:var(--ed-serif)!important;font-weight:200!important;letter-spacing:0;color:var(--ed-ink)!important;
  font-size:clamp(2.2rem,1.25rem + 2.8vw,3.9rem)!important;line-height:1.08!important;text-wrap:balance}
#treatPage .tm-after__lead{margin:18px 0 0;max-width:34ch;font:300 clamp(1.15rem,1rem + .5vw,1.45rem)/1.5 var(--ed-sans);color:var(--ed-ink)}
#treatPage .tm-after__note{margin:0;max-width:40ch;font:300 1.02rem/1.7 var(--ed-sans);color:var(--ink)}
#treatPage .tm-paper{position:relative;background:#FFFFFF;border:1px solid var(--ed-line);border-radius:var(--ed-radius);
  box-shadow:0 1px 0 rgba(15,30,46,.03),0 26px 60px -18px rgba(15,30,46,.16);padding:clamp(24px,3vw,40px) clamp(22px,3vw,42px) clamp(18px,2vw,26px)}
#treatPage .tm-paper::before{content:"";position:absolute;top:-1px;inset-inline:clamp(22px,3vw,42px);height:2px;border-radius:0 0 2px 2px;background:var(--ed-bronze)}
#treatPage .tm-paper__h{margin:0;font:400 clamp(1.05rem,.98rem + .3vw,1.2rem)/1.5 var(--ed-sans);color:var(--ed-ink)}
#treatPage .tm-paper__list{list-style:none;counter-reset:tm;margin:18px 0 0;padding:0}
#treatPage .tm-paper__list li{counter-increment:tm;display:grid;grid-template-columns:2.6em minmax(0,1fr);align-items:baseline;
  padding:15px 0;border-top:1px solid var(--ed-line);font:300 clamp(1.02rem,.96rem + .3vw,1.16rem)/1.5 var(--ed-sans);color:var(--ed-ink)}
#treatPage .tm-paper__list li::before{content:counter(tm,decimal-leading-zero);font:400 .74rem/1 var(--ed-latin);letter-spacing:.14em;color:var(--ed-bronze)}
#treatPage .tm-paper__sig{display:flex;justify-content:flex-end;margin:6px 0 0;padding-top:14px;border-top:1px solid var(--ed-line);color:var(--ed-muted)}
#treatPage .tm-paper__sig .wm{font-size:.6rem;letter-spacing:.24em}
#treatPage .tm-fine{margin-block:clamp(48px,6vw,80px) 0;padding-block:20px clamp(28px,3vw,40px);border-top:1px solid var(--ed-line);
  font:400 .8rem/1.75 var(--ed-sans);color:var(--ed-muted)}

/* ---------- closing: "so what bothers you?" ---------- */
#treatPage .tm-close{padding-block:clamp(72px,10vw,150px)}
#treatPage .tm-close__in{display:flex;flex-direction:column;align-items:center;text-align:center}
#treatPage .tm-close__h{font-size:clamp(2.6rem,1.3rem + 3.8vw,5.4rem)!important;line-height:1.02!important}
#treatPage .tm-close__lead{margin:22px 0 0;max-width:36ch;font:300 clamp(1.15rem,1rem + .62vw,1.5rem)/1.5 var(--ed-sans);color:var(--ed-ink);text-wrap:balance}
#treatPage .tm-close__p{margin:14px 0 0;max-width:52ch;font:300 1.02rem/1.8 var(--ed-sans);color:var(--ink);text-wrap:balance}
#treatPage .tm-pick{width:100%;max-width:640px;margin-top:clamp(34px,4vw,48px);padding-top:clamp(26px,3vw,34px);border-top:1px solid var(--ed-line)}
#treatPage .tm-pick__l{margin:0;font:400 .88rem/1.5 var(--ed-sans);color:var(--ed-muted)}
#treatPage .tm-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
#treatPage .tm-chip{gap:.4em;padding:0 18px!important;font-size:.9rem}
#treatPage .tm-chip__ok{width:0;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transition:width .25s var(--ed-ease),opacity .2s ease}
#treatPage .tm-chip[aria-pressed="true"] .tm-chip__ok{width:14px;opacity:1}
#treatPage .tm-chip:focus-visible{outline:2px solid var(--ed-ink);outline-offset:3px}
/* the message as it will be sent */
#treatPage .tm-msg{margin:18px auto 0;width:fit-content;max-width:100%;padding:12px 18px;border-radius:18px 18px 6px 18px;background:var(--ed-ivory);
  font:400 .95rem/1.6 var(--ed-sans);color:var(--ed-ink);text-align:start;box-sizing:border-box}
#treatPage .tm-acts--center{justify-content:center;margin-top:clamp(28px,3vw,36px)}

/* ---------- widths ---------- */
@media (min-width:760px){
  #treatPage .tm-ch__art{max-width:560px;width:100%;margin-inline:auto}
}
@media (min-width:960px){
  #treatPage .tm-after__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"txt card" "note card";
    column-gap:clamp(48px,7vw,120px);row-gap:28px;align-items:start}
  #treatPage .tm-after__txt{grid-area:txt}
  #treatPage .tm-paper{grid-area:card}
  #treatPage .tm-after__note{grid-area:note}
}
@media (min-width:1100px){
  #treatPage .tm-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr)}
  #treatPage .tm-menu{padding-top:clamp(22px,2.4vw,40px)}
  #treatPage .tm-item{min-height:80px;padding-block:10px}
  #treatPage .tm-ch__in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,6vw,104px);align-items:start}
  /* the art stays beside the text while it is read, and changes sides from chapter to chapter */
  #treatPage .tm-ch__art{max-width:none;margin:0;position:sticky;top:calc(var(--tm-y0,0px) + var(--tm-ih) + 28px)}
  #treatPage .tm-ch--alt .tm-ch__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  #treatPage .tm-ch--alt .tm-ch__art{order:2}
}
@media (max-width:759px){
  #treatPage{--tm-ih:50px}
  #treatPage .tm-index__in{padding-inline:6px;
    -webkit-mask-image:linear-gradient(to left,transparent,#000 18px,#000 calc(100% - 18px),transparent);
    mask-image:linear-gradient(to left,transparent,#000 18px,#000 calc(100% - 18px),transparent)}
  #treatPage .tm-index a{padding:0 10px;font-size:.82rem}
  #treatPage .tm-index a::after{inset-inline:10px}
  #treatPage .tm-item{min-height:80px}
  #treatPage .tm-ch__in{padding-top:20px}
  #treatPage .tm-acts .btn{flex:1 1 auto;justify-content:center}
}
@media (max-width:400px){
  #treatPage .tm-item{gap:12px;padding-inline:0}
  #treatPage .tm-item__sum{font-size:.84rem}
  #treatPage .tm-chip{padding:0 14px!important}
  #treatPage .tm-acts .btn{padding-inline:1.1rem}
}
@media (prefers-reduced-motion:reduce){
  #treatPage .tm-ch__art img,#treatPage .tm-index,#treatPage .tm-index.is-on,#treatPage .tm-index a::after,
  #treatPage .tm-lens,#treatPage .tm-lens img,#treatPage .tm-item::before,#treatPage .tm-item__name,#treatPage .tm-chip__ok{transition:none}
}