/* ============================================================
   MedirAI site stylesheet. Repo-owned (ADR-010): JF's drafts supply
   content and markup, this file decides how it looks. Tokens live in
   tokens.css. Measured corrections from the 2026-09-18 audit (W-061,
   W-062) are carried into the rules they belong to and credited inline.
   Layout breakpoints are container queries on <main>, so the rail can
   never make a grid narrower than the viewport alone would (W-065).
   ============================================================ */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:var(--t-16)/var(--lh-body) var(--f-body);
  font-feature-settings:"kern";text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
img{height:auto}
a{color:inherit}
::selection{background:var(--accent-soft)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
[hidden]{display:none!important}

/* ---------- progressive enhancement (spec 5): all views without JS ---------- */
.js .page{display:none}
.js .page.on{display:block;animation:rise .34s ease both}
@keyframes rise{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--ink);padding:.6rem 1rem;z-index:99;border-radius:var(--r-sm)}
.skip:focus{left:.5rem;top:.5rem}

/* ---------- rail: a header below 1200px, a fixed rail from 1200px (R9) ----------
   Grid areas place the brand and language control on one row and the nav
   beneath; DOM order (brand, nav, foot) is unchanged, so reading order holds. */
.rail{
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand foot" "nav nav";
  align-items:center;column-gap:1.25rem;row-gap:.5rem;
  padding:.75rem var(--pad);border-bottom:1px solid var(--line);background:var(--paper);
  position:sticky;top:0;z-index:40;
}
.rail>div:first-child{grid-area:brand}
.rail nav{grid-area:nav;display:flex;flex-wrap:wrap;gap:.15rem .25rem}
.rail-foot{grid-area:foot;display:flex;align-items:center;gap:.9rem}
.brand{display:block;text-decoration:none;line-height:0;width:max-content}
.brand img{display:block;width:148px;height:auto}
.brand .logo-d{display:none}
.brand-sub,.rail-legal{display:none}
.rail nav a{
  font-size:var(--t-14);font-weight:500;text-decoration:none;color:var(--ink-2);
  padding:.4rem .65rem;border-radius:var(--r-sm);display:inline-flex;align-items:center;gap:.5rem;
  min-height:2.25rem;transition:background .14s,color .14s;
}
.rail nav a .n{display:none;font:500 var(--t-12)/1 var(--f-mono);color:var(--ink-3);width:1.2rem;letter-spacing:.02em}
.rail nav a:hover{background:var(--accent-soft);color:var(--ink)}
.rail nav a[aria-current="page"]{color:var(--lapis);background:var(--accent-soft)}
.rail nav a[aria-current="page"] .n{color:var(--lapis)}
.langs{display:flex;gap:.3rem}
.langs button{
  font:500 var(--t-12)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
  background:none;border:1px solid var(--line-ctl);color:var(--ink-3);
  padding:.5rem .6rem;min-height:2.25rem;border-radius:var(--r-sm);cursor:pointer;transition:.14s;
}
.langs button:hover{border-color:var(--green);color:var(--ink)}
.langs button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--navy)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand .logo-l{display:none}
  :root:not([data-theme="light"]) .brand .logo-d{display:block}
}
:root[data-theme="dark"] .brand .logo-l{display:none}
:root[data-theme="dark"] .brand .logo-d{display:block}
:root[data-theme="light"] .brand .logo-l{display:block}
:root[data-theme="light"] .brand .logo-d{display:none}

@media (min-width:1200px){
  .rail{
    position:fixed;inset:0 auto 0 0;width:252px;
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    border-right:1px solid var(--line);border-bottom:0;padding:1.6rem 1.35rem;
  }
  .brand img{width:182px}
  .brand-sub{
    display:block;font:500 var(--t-12)/var(--lh-small) var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-3);margin-top:.85rem;max-width:12rem;
  }
  .rail nav{display:flex;flex-direction:column;gap:1px;margin-top:2.1rem}
  .rail nav a{display:flex;padding:.45rem .6rem}
  .rail nav a .n{display:inline}
  .rail-foot{display:block;margin-top:auto;padding-top:1.4rem;border-top:1px solid var(--line-2)}
  .rail-legal{display:block;font-size:var(--t-12);line-height:var(--lh-small);color:var(--ink-3);margin-top:.9rem}
  main,footer{margin-left:252px}
}

/* ---------- shell ----------
   <main> is the layout container. The wrap is capped at 52rem in the header
   layout and 76rem beside the rail, so the content column at 1200px (852px)
   is wider than at 1199px (832px): the width never steps down as the
   viewport grows (spec 11.6). */
main{container-type:inline-size;container-name:main;padding:0 var(--pad)}
:root{--pad:clamp(1.25rem,4vw,3.5rem)}
.wrap{max-width:52rem;margin:0 auto}
@media (min-width:1200px){.wrap{max-width:76rem}}
.measure{max-width:33em}

section.band{padding:4rem 0;border-top:1px solid var(--line-2);scroll-margin-top:5rem}
section.band:first-of-type{border-top:0}

/* one navy band per page (spec 6.2): chosen by the section's eyebrow key,
   so a draft that keeps its keys keeps its bands. Full bleed to the main
   padding edge through a pseudo-element; isolation keeps it under the text. */
section.band:has([data-t="home.marks.eyebrow"]),
section.band:has([data-t="flow.bound.eyebrow"]),
section.band:has([data-t="pa.split.eyebrow"]),
section.band:has([data-t="cl.bound.eyebrow"]),
section.band:has([data-t="tr.docs.eyebrow"]),
section.band:has([data-t="co.inv.eyebrow"]){
  position:relative;isolation:isolate;padding:5.5rem 0;border-top:0;color:var(--ink);
  --ink:var(--on-band);--ink-2:var(--on-band-2);--ink-3:var(--on-band-3);
  --paper:var(--band);--surface:rgba(255,255,255,.04);--sunk:rgba(255,255,255,.06);
  --line:var(--band-line);--line-2:var(--band-line);--line-ctl:var(--band-ctl);
  --lapis:var(--green);--verdigris:#96AFC3;--ochre:#D9A255;
  --accent-soft:var(--band-soft);--verd-soft:rgba(150,175,195,.14);--ochre-soft:rgba(217,162,85,.14);
  --focus:var(--green);--note-rule:var(--green);
}
section.band:has([data-t="home.marks.eyebrow"])::before,
section.band:has([data-t="flow.bound.eyebrow"])::before,
section.band:has([data-t="pa.split.eyebrow"])::before,
section.band:has([data-t="cl.bound.eyebrow"])::before,
section.band:has([data-t="tr.docs.eyebrow"])::before,
section.band:has([data-t="co.inv.eyebrow"])::before{
  content:"";position:absolute;z-index:-1;top:0;bottom:0;
  left:calc(50% - 50cqw - var(--pad));right:calc(50% - 50cqw - var(--pad));
  background:var(--band);
}

/* ---------- type roles (spec 6.1): one step each ---------- */
.eyebrow{
  font:500 var(--t-12)/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 1.1rem;display:flex;align-items:center;gap:.6rem;
}
.eyebrow::after{content:"";height:1px;flex:1;background:var(--line);max-width:4rem}
h1{font:600 var(--t-h1)/var(--lh-display) var(--f-display);letter-spacing:-.025em;margin:0;text-wrap:balance}
h2{font:600 var(--t-28)/1.2 var(--f-display);letter-spacing:-.02em;margin:0 0 1rem;text-wrap:balance;max-width:26em}
@container main (min-width:52rem){h2{font-size:var(--t-40);line-height:var(--lh-display)}}
h3{font:600 var(--t-18)/var(--lh-head) var(--f-display);letter-spacing:-.012em;margin:0 0 .4rem}
h4{font:600 var(--t-16)/var(--lh-head) var(--f-display);margin:0 0 .3rem}
p{margin:0 0 1.05rem;max-width:33em}
p:last-child{margin-bottom:0}
.lead{font-size:var(--t-18);line-height:1.6;color:var(--ink-2);font-weight:500}
@container main (min-width:52rem){.lead{font-size:var(--t-21)}}
.small{font-size:var(--t-14);line-height:var(--lh-small);color:var(--ink-3)}
strong{font-weight:700}
.mono{font-family:var(--f-mono)}
em.q{font-style:italic;font-weight:600}
.ink-3{color:var(--ink-3)}
.mt-l{margin-top:2.2rem}
.mt-s{margin-top:.9rem}
.mw-34{max-width:34rem}
.mw-46{max-width:46rem}

/* ---------- hero (spec 6.3, R5): copy left, art right from 52rem ----------
   The art is placed by grid position, not by order, so the DOM stays
   eyebrow, h1, lead, creed, CTAs, art. */
.hero{display:grid;gap:0 3rem;padding:3rem 0 1.5rem;align-items:center}
.hero>*{grid-column:1}
.hero .lead{margin-top:1.25rem;max-width:33em}
.hero-art{grid-column:1;margin-top:2.25rem}
@container main (min-width:52rem){
  .hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr);padding:4rem 0 2rem}
  .hero-art{grid-column:2;grid-row:1 / span 6;margin-top:0;align-self:center}
}
/* the hero crop is .shot-frame.is-shot.hero-shot, down with the frame rules:
   .shot-frame.is-shot resets aspect-ratio and height, so a plain .hero-shot
   rule up here loses to it whatever it says. */
.hero-motif{display:block;width:100%;height:auto;max-height:22rem}
.hero-motif .m1{fill:var(--green);opacity:.9}
.hero-motif .m2{fill:var(--accent-soft)}
.hero-motif .m3{fill:none;stroke:var(--green);stroke-width:.06;opacity:.7}
.creed{
  margin-top:2rem;padding:.9rem 1.2rem;border-left:3px solid var(--green);
  background:var(--accent-soft);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--t-18);font-weight:600;line-height:1.45;color:var(--ink);max-width:33em;letter-spacing:-.01em;
}

/* ---------- buttons ---------- */
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.btn{
  font:600 var(--t-16)/1.2 var(--f-body);text-decoration:none;cursor:pointer;
  padding:.85rem 1.4rem;min-height:2.75rem;border-radius:var(--r-sm);border:1.5px solid var(--line-ctl);
  background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;gap:.55rem;transition:.16s;
}
.btn:hover{border-color:var(--green);color:var(--lapis)}
.btn.pri{background:var(--green);border-color:var(--green);color:var(--navy)}
.btn.pri:hover{background:#17B171;border-color:#17B171;color:var(--navy)}
/* W-064 c: the arrow characters stay in the text (tier-2 reads them) but are
   painted as a mask, so no system glyph shows. */
.arw,.ext{
  display:inline-block;width:1em;height:1em;color:transparent;overflow:hidden;
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;
  background-color:var(--arrow-ink,currentColor);
}
.arw{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.ext{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");width:.75em;height:.75em}
.btn .arw{--arrow-ink:currentColor}
.btn.pri .arw{--arrow-ink:var(--navy)}

/* ---------- text sections with a list split into two columns (spec 6.2) ----------
   A section whose only wide child is a list keeps the heading and paragraph
   left and the list right, so the right third of the canvas carries content. */
@container main (min-width:52rem){
  section.band:has(> ul.q),section.band:has(> ul.plain){
    display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:3rem;
  }
  section.band:has(> ul.q)>*,section.band:has(> ul.plain)>*{grid-column:1}
  section.band>ul.q,section.band>ul.plain{grid-column:2;grid-row:1 / span 12;align-self:start;margin-top:.35rem}
}

/* ============================================================
   Components
   ============================================================ */

/* ---------- hairline grids: each cell paints its own ring (W-062 N1), so an
   empty cell would be paper; the column counts below leave none (spec 11.5). */
.mat,.marks,.specs,.team,.grid{display:grid;gap:1px;margin-top:1.9rem;background:var(--paper)}
.mat>*,.marks>*,.specs>*,.team>*,.grid>*{background:var(--paper);box-shadow:0 0 0 1px var(--line-2);padding:1.3rem 1.35rem}
.grid{margin-top:1.8rem}
@container main (min-width:44rem){
  .mat,.marks,.g2,.g3,.g4,.team{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* five verticals on a six-track grid: three on the first row, two wider ones on the second */
  .specs{grid-template-columns:repeat(6,minmax(0,1fr))}
  .specs>*{grid-column:span 2}
  .specs>:nth-child(4),.specs>:nth-child(5){grid-column:span 3}
}
@container main (min-width:66rem){
  .mat,.marks,.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .specs{grid-template-columns:repeat(5,minmax(0,1fr))}
  .specs>*,.specs>:nth-child(4),.specs>:nth-child(5){grid-column:span 1}
}
.mat h3{font-size:var(--t-18);margin-bottom:.4rem}
.mat p,.marks p,.specs p{font-size:var(--t-14);color:var(--ink-2);margin:0;max-width:none}
.specs h3{font-size:var(--t-16);margin-bottom:.35rem}
.grid h3{font-size:var(--t-16);margin:0 0 .3rem}
.grid p{font-size:var(--t-14);color:var(--ink-2)}

/* ---------- small labels: one voice, one size (R10) ---------- */
.pill,.tag,.who,.role,.k,.st,.shot-note,.doc .id,.boundary h3,.step .num{
  font-family:var(--f-mono);font-size:var(--t-12);font-weight:500;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;
}
.pill{display:inline-block;padding:.3rem .55rem;border-radius:4px;margin-bottom:.75rem}
.pill.now{background:var(--accent-soft);color:var(--lapis)}
.pill.next{background:var(--verd-soft);color:var(--verdigris)}
.pill.exp{background:var(--ochre-soft);color:var(--ochre)}
.marks .k{color:var(--verdigris);display:block;margin-bottom:.55rem}
.specs .st{display:block;margin-bottom:.3rem}
.specs .st.a{color:var(--lapis)}
.specs .st.v{color:var(--verdigris)}
.specs .st.o{color:var(--ochre)}
.who,.role{color:var(--ink-3);margin-bottom:.75rem}
.role{color:var(--lapis)}

/* ---------- cards, doors ---------- */
.cards{display:grid;gap:1rem;margin-top:1.8rem}
.doors{display:grid;gap:1rem;margin-top:1.9rem}
@container main (min-width:44rem){.cards.c2{grid-template-columns:1fr 1fr}.cards.c3,.doors{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card,.door{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:1.5rem}
.card p,.door p{font-size:var(--t-14);color:var(--ink-2);max-width:none}
.door{display:flex;flex-direction:column;text-decoration:none;transition:border-color .16s}
.door:hover{border-color:var(--green)}
.door h3{font-size:var(--t-21);margin-bottom:.45rem}
.door p{flex:1;margin-bottom:1rem}
.door .go{font-size:var(--t-14);color:var(--lapis);font-weight:600}

/* ---------- boundary: the site's structural device ---------- */
.boundary{display:grid;margin-top:1.9rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
@container main (min-width:44rem){.boundary{grid-template-columns:1fr 1fr}}
.boundary>div{padding:1.5rem 1.55rem}
.boundary>div+div{border-top:1px solid var(--line)}
@container main (min-width:44rem){.boundary>div+div{border-top:0;border-left:2px solid var(--verdigris)}}
.boundary h3{margin:0 0 .95rem;color:var(--ink-3)}
.boundary .yes h3{color:var(--lapis)}
.boundary .no h3{color:var(--verdigris)}
.boundary ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.62rem}
.boundary li{font-size:var(--t-14);line-height:var(--lh-small);padding-left:1.05rem;position:relative;color:var(--ink-2)}
.boundary li::before{content:"";position:absolute;left:0;top:.62em;width:.42rem;height:1px;background:var(--ink-3)}
.boundary .no li::before{background:var(--verdigris)}

/* ---------- stack (five layers) ---------- */
.stack{margin-top:1.9rem;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.stack .layer{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;padding:1.05rem 1.35rem;align-items:baseline}
.stack .layer+.layer{border-top:1px solid var(--line-2)}
.stack .layer .tag{color:var(--ink-3);white-space:nowrap}
.stack .layer strong{display:block;font-size:var(--t-16);margin-bottom:.15rem}
.stack .layer span.d{display:block;font-size:var(--t-14);color:var(--ink-2);max-width:33em}
.stack .layer.app{background:var(--accent-soft)}
.stack .layer.app strong{color:var(--lapis)}

/* ---------- steps ---------- */
.steps{margin-top:1.9rem;display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:2.4rem 1fr;gap:1.1rem;padding:1.05rem 0;border-top:1px solid var(--line-2);align-items:baseline}
.step:last-child{border-bottom:1px solid var(--line-2)}
.step .num{color:var(--lapis);font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none}
.step h3{font-size:var(--t-16)}
.step p{font-size:var(--t-14);color:var(--ink-2);margin:0}

/* ---------- lists ---------- */
ul.plain{margin:1.1rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.7rem;max-width:33em}
ul.plain li{padding-left:1.15rem;position:relative;font-size:var(--t-16);color:var(--ink-2);line-height:var(--lh-small)}
ul.plain li::before{content:"";position:absolute;left:0;top:.66em;width:.45rem;height:1px;background:var(--lapis)}
ul.plain.verd li::before{background:var(--verdigris)}
ul.q{margin:1.2rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.85rem;max-width:33em}
ul.q li{font-size:var(--t-18);font-weight:500;color:var(--ink);padding-left:1.2rem;border-left:2px solid var(--green);line-height:1.4}

/* ---------- note ---------- */
.note{margin-top:1.8rem;padding:1.15rem 1.3rem;background:var(--sunk);border-left:2px solid var(--note-rule,var(--ochre));border-radius:0 var(--r-sm) var(--r-sm) 0}
.note .k{color:var(--ochre);display:block;margin-bottom:.5rem}
.note p{font-size:var(--t-14);color:var(--ink-2);margin:0;max-width:33em}

/* ---------- team: a monogram tile from data-initials (R6). Pseudo-element
   content is not innerText, so tier-2 still sees JF's text exactly. A real
   portrait, when all four arrive, is <img class="portrait"> and hides the tile. */
.member{padding:1.6rem 1.55rem}
.member::before{
  content:attr(data-initials);display:flex;align-items:center;justify-content:center;
  width:3.5rem;height:3.5rem;margin-bottom:1rem;border-radius:var(--r-md);
  background:var(--accent-soft);color:var(--lapis);font:600 var(--t-18)/1 var(--f-display);letter-spacing:.02em;
}
.member[data-initials=""]::before{content:"";background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line)}
.member:has(img.portrait)::before{display:none}
.member img.portrait{width:3.5rem;height:3.5rem;border-radius:var(--r-md);object-fit:cover;margin-bottom:1rem;display:block}
.member h3{font-size:var(--t-21);margin-bottom:.5rem;letter-spacing:-.012em}
.member h3 a.li{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:.42rem;transition:color .15s;border-radius:3px}
.member h3 a.li svg{width:.8em;height:.8em;fill:var(--ink-3);flex:none;opacity:.65;transition:fill .15s,opacity .15s}
.member h3 a.li:hover{color:var(--lapis)}
.member h3 a.li:hover svg{fill:var(--lapis);opacity:1}
.member .qn{display:block;font-style:italic;font-size:var(--t-16);color:var(--ink-3);margin-bottom:.75rem}
.member p{font-size:var(--t-14);color:var(--ink-2);margin:0 0 .8rem;max-width:none}
.member ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.35rem}
.member ul li{font-size:var(--t-12);color:var(--ink-3);border:1px solid var(--line);padding:.25rem .55rem;border-radius:4px}

/* ---------- docs, contact ---------- */
.docs{margin-top:1.8rem;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.doc{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:.95rem 1.3rem;align-items:baseline}
.doc+.doc{border-top:1px solid var(--line-2)}
.doc .id{color:var(--verdigris);white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.02em;text-transform:none}
.doc strong{display:block;font-size:var(--t-16);margin-bottom:.1rem}
.doc span{font-size:var(--t-14);color:var(--ink-2)}
.contact{margin-top:2rem;padding:1.8rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.contact h3{font-size:var(--t-21);margin-bottom:.5rem}
.contact a.mail{font-family:var(--f-mono);font-size:var(--t-16);color:var(--lapis);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px}
.contact a.mail:hover{border-color:var(--lapis)}

/* ---------- support programmes: text chips until logos are permitted (R8) ---------- */
.orgs{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.3rem}
.orgs a.org{
  font:600 var(--t-13)/1 var(--f-body);letter-spacing:.01em;
  border:1.5px solid var(--line-ctl);padding:.6rem .85rem;min-height:2.25rem;border-radius:var(--r-sm);
  color:var(--ink-2);background:var(--surface);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;transition:.15s;
}
.orgs a.org .ext{opacity:.5;transition:opacity .15s}
.orgs a.org:hover{border-color:var(--green);color:var(--lapis)}
.orgs a.org:hover .ext{opacity:1}
/* logo variant, unused until R8 is met: <a class="org has-logo"><img alt="IVADO"></a> */
.orgs a.org.has-logo img{height:1.6rem;width:auto;display:block}

/* ---------- figures and diagrams (spec 6.3) ----------
   The wrapper scrolls when the container is narrower than the drawing, and
   the drawing never renders below its viewBox width, so 12px SVG text is
   12px on screen. A fade at the right edge says there is more. */
.fig{margin:1.9rem 0 0}
.fig-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;-webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent)}
.fig-scroll svg{display:block;height:auto;overflow:visible;width:100%}
.fig-scroll svg[viewBox="0 0 1060 300"]{min-width:1060px}
.fig-scroll svg[viewBox="0 0 1100 312"]{min-width:1100px}
.fig-scroll svg[viewBox="0 0 1000 300"]{min-width:1000px}
@container main (min-width:70rem){.fig-scroll{mask-image:none;-webkit-mask-image:none}}
.fig figcaption{font-size:var(--t-14);color:var(--ink-3);margin-top:1rem;max-width:33em;line-height:var(--lh-small)}
.d-node{fill:var(--surface);stroke:var(--line)}
.d-node-a{fill:var(--accent-soft);stroke:var(--lapis)}
.d-node-v{fill:var(--verd-soft);stroke:var(--verdigris)}
.d-node-o{fill:var(--ochre-soft);stroke:var(--ochre)}
.d-h{fill:var(--ink);font-family:var(--f-body);font-size:13px;font-weight:600}
.d-s{fill:var(--ink-3);font-family:var(--f-body);font-size:12px}
.d-t{fill:var(--ink-3);font-family:var(--f-mono);font-size:12px;letter-spacing:.06em}
.d-t-a{fill:var(--lapis)}
.d-t-o{fill:var(--ochre)}
.d-e{stroke:var(--ink-3);stroke-width:1.25;fill:none}
.d-e-a{stroke:var(--lapis);stroke-width:1.5;fill:none}
.d-e-v{stroke:var(--verdigris);stroke-width:1.5;fill:none;stroke-dasharray:5 4}
.d-e-o{stroke:var(--ochre);stroke-width:1.5;fill:none;stroke-dasharray:5 4}
.d-ar{fill:var(--ink-3)}
.d-ar-a{fill:var(--lapis)}
.d-ar-v{fill:var(--verdigris)}
.d-ar-o{fill:var(--ochre)}

/* ---------- product frames: real captures and pending images alike (R5) ----------
   A navy title bar with three dots reads as a product screen; the pending
   text stays visible (it is JF's and it is true) but quiet. */
.shots{display:grid;gap:1.1rem;margin-top:1.9rem;align-items:start}
@container main (min-width:44rem){.shots.s2{grid-template-columns:1fr 1fr}.shots.s3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.shot{margin:0}
.shot-frame{
  position:relative;border:1px solid var(--line);border-radius:var(--r-md);background:var(--sunk);
  padding:2.75rem 1rem 1.25rem;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;text-align:center;min-height:11rem;
}
.shot-frame::before{content:"";position:absolute;top:0;left:0;right:0;height:1.5rem;background:var(--navy)}
.shot-frame::after{
  content:"";position:absolute;top:.5rem;left:.75rem;width:2.4rem;height:.5rem;
  background:radial-gradient(circle at .25rem 50%,rgba(255,255,255,.45) .2rem,transparent .22rem),
             radial-gradient(circle at 1.2rem 50%,rgba(255,255,255,.45) .2rem,transparent .22rem),
             radial-gradient(circle at 2.15rem 50%,rgba(255,255,255,.45) .2rem,transparent .22rem);
}
.shot-frame:not(.is-shot){aspect-ratio:16/10}
.shot-frame.tall:not(.is-shot){aspect-ratio:9/16;max-width:12rem;margin-inline:auto}
.shot-file{font:400 var(--t-12)/1.3 var(--f-mono);color:var(--lapis);word-break:break-all}
.shot-note{color:var(--ink-3);letter-spacing:.06em}
.shot-frame.is-shot{padding:1.5rem 0 0;background:var(--paper);display:block;aspect-ratio:auto;min-height:0}
.shot-frame.is-shot img{display:block;width:100%;height:auto}
/* the hero capture is cropped rather than fitted: the frame keeps its 1.5rem
   title bar and the image fills the rest from its top left corner, so the step
   rail is large enough to read (spec 6.3). */
/* the hero shows the top left of the workspace at twice the scale, so the record
   header, the progression row and the clinical information card are what a
   visitor reads and the synthetic skin photographs, low in the image, fall
   outside the frame. The aspect ratio is on the content box, below the 1.5rem
   title bar, so the visible share of the image is 0.694/1.25 = 55.6% at every
   frame width; taken on the border box it would drift towards 60% as the frame
   grows and let the Images card (at about 57% of the image) show. The frame
   still reads as 4/3 overall: 36/25 plus the bar. */
.shot-frame.is-shot.hero-shot{box-sizing:content-box;aspect-ratio:36/25}
.shot-frame.is-shot.hero-shot img{width:200%;max-width:none;height:auto;object-fit:unset;object-position:unset}

/* JF asked on 2026-09-18 for the mobile app's home screen on the website's home
   page. It stands in front of the workspace as one composition rather than as a
   second frame in the column, so the duo keeps room on its right and bottom for
   the phone to overhang. The paper ring is what separates the two frames; the
   site draws no drop shadows. The duo is one block, so the composition survives
   the hero stacking below 52rem. */
.hero-duo{position:relative;padding:0 1.25rem 2.75rem 0}
.hero-phone{position:absolute;right:0;top:2.75rem;bottom:auto;width:30%;max-width:none;margin:0;box-shadow:0 0 0 4px var(--paper)}
.hero-phone img{display:block;width:100%;height:auto}
/* The phone is pinned from the top, 2.75rem down, so its title bar always sits
   clear of the workspace's label bar whatever the width, and at 30% of the
   duo it overhangs the frame's bottom by at most 2.75rem, which the duo's bottom padding reserves. At this
   width the phone cannot show a label of its own (the text needs about 220px
   and has about 60px), so
   the workspace beside it carries the label and the phone's alt text opens
   with Illustration. */
.hero-art .shot-frame.hero-phone.is-shot[data-kind]::after{content:""}

/* Generated imagery is never left where a viewer would read it as a photograph
   of a real person or patient: every product frame names its kind in the title
   bar, in the page's language. The label is generated content, so the DOM's
   visible text is unchanged; it shares ::after with the three window dots, which
   stay as the background on the left. */
.shot-frame.is-shot[data-kind]::after{
  left:.75rem;right:.75rem;width:auto;
  font:500 var(--t-12)/1.5rem var(--f-mono);letter-spacing:.06em;text-transform:none;
  color:rgba(244,247,250,.78);text-align:right;
  top:0;height:1.5rem;
  padding-left:3.2rem;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.shot-frame.is-shot[data-kind="illustration"]:lang(fr)::after{content:"Illustration · données fictives"}
.shot-frame.is-shot[data-kind="illustration"]:lang(en)::after{content:"Illustration · fictional data"}
.shot-frame.is-shot[data-kind="illustration"]:lang(it)::after{content:"Illustrazione · dati fittizi"}
.shot-frame.is-shot[data-kind="capture"]:lang(fr)::after{content:"Capture · données fictives"}
.shot-frame.is-shot[data-kind="capture"]:lang(en)::after{content:"Capture · fictional data"}
.shot-frame.is-shot[data-kind="capture"]:lang(it)::after{content:"Cattura · dati fittizi"}
@container main (min-width:44rem){
  .shots.s3 .shot-frame{aspect-ratio:auto;height:15rem}
  .shots.s3 .shot-frame.is-shot img{height:calc(15rem - 1.5rem);object-fit:contain;object-position:top left}
  .shots.s3 .shot-frame.tall{max-width:none;margin-inline:0}
  /* JF asked on 2026-09-18 that the consultation checklist be shown beside the
     capture screen, so the third frame holds two phones rather than one: they
     sit side by side at the row's height, each keeping its own aspect. */
  .shots.s3 .shot-frame.is-shot.pair img{width:auto;height:calc(15rem - 1.5rem)}
}
.shot-frame.is-shot.pair{max-width:none;display:flex;flex-direction:row;align-items:flex-start;gap:.5rem;padding:1.5rem .5rem 0;justify-content:center}
.shot-frame.is-shot.pair img{width:auto;max-width:calc(50% - .25rem);height:auto}
.shot figcaption{margin-top:.7rem}
.shot figcaption strong{display:block;font-size:var(--t-16);margin-bottom:.15rem}
.shot figcaption span{font-size:var(--t-14);color:var(--ink-2)}

/* ---------- footer (spec 6.3) ---------- */
footer{border-top:1px solid var(--line);padding:2.4rem var(--pad) 3rem;background:var(--paper)}
footer .wrap{display:flex;flex-direction:column;gap:1.7rem}
.foot-cols{display:flex;flex-wrap:wrap;gap:1.6rem 3rem;justify-content:space-between;align-items:flex-start}
.foot-contact{display:flex;flex-wrap:wrap;gap:.4rem 1.8rem;align-items:center}
.foot-copy{font-size:var(--t-13);color:var(--ink-3);margin:0;max-width:none;padding-top:1.4rem;border-top:1px solid var(--line-2)}
.foot-link{color:var(--lapis);text-decoration:none;display:inline-flex;align-items:center;gap:.36rem;font-size:var(--t-14);font-weight:500;transition:color .15s}
.foot-link:hover{text-decoration:underline;text-underline-offset:3px}
.foot-link svg{width:.95em;height:.95em;fill:currentColor;flex:none}
footer .addr{font-size:var(--t-13);color:var(--ink-3);font-style:normal;line-height:1.7}
.foot-legal{font-size:var(--t-13);color:var(--ink-3);margin:0;max-width:none}
.foot-legal a{color:var(--lapis);text-decoration:none;font-weight:500}
.foot-legal a:hover{text-decoration:underline;text-underline-offset:3px}