/* The Face Clinic: the research form's shell (research.html only).
 *
 * A glass card over a flowing silk background on desktop and tablet, a plain
 * white page on phones. Built from the Edition 03 tokens in styles.css, no new
 * colours: the card and sheet follow the same light and dark palette as the
 * rest of the site, and the silk itself is a fixed field of greys, like the
 * footer and the .metal sections. Loaded after styles.css and the page's own
 * <style>, so the .rs prefix wins. Logical properties throughout: Arabic flips
 * by dir on #flow and on <html> with no per-language rules here.
 */

body.rs{background:var(--paper); min-height:100svh;}

/* ---- the background (hidden on phones) ---------------------------------- */
.rs-bg{position:fixed; inset:0; z-index:0; overflow:hidden; display:none;
  background:radial-gradient(130% 100% at 22% 4%, #6A6D6C 0%, #3A3D3C 38%, #232524 68%, #151616 100%);}
#silk{position:absolute; inset:0; inline-size:100%; block-size:100%; display:block;}
.rs-scrim{position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,11,11,.60), rgba(10,11,11,.04) 24%, rgba(10,11,11,.10) 68%, rgba(10,11,11,.44));}

/* ---- header: the Research lockup and the language switch ----------------- */
/* direction:ltr: the logo and the language switch never trade sides, so a
   switch made by mistake is undone in the same place. */
.rs-top{direction:ltr; position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:26px var(--gutter) 0; padding-block-start:max(26px, env(safe-area-inset-top));}
.rs-top .brand{display:block; flex:none; inline-size:190px;}
.rs-top .brand img{display:block; inline-size:100%; block-size:auto;}
.rs-top .lang-row{display:flex; gap:4px; margin:0; padding:4px; flex:none; border-radius:12px; background:var(--mist);
  position:relative; --pill-bg:var(--white); --pill-fg:var(--ink); --pill-shadow:0 1px 3px rgba(21,22,22,.14);}
.rs-top .lang-btn{min-block-size:40px; min-inline-size:48px; padding:0 14px; border:0; border-radius:8px; background:transparent;
  color:var(--graphite); font:inherit; font-size:.9rem; font-weight:500; cursor:pointer; touch-action:manipulation;}
.rs-top .lang-btn[aria-pressed="true"]{background:var(--pill-bg); color:var(--pill-fg); box-shadow:var(--pill-shadow);}
/* once research-lang.js has placed it, one highlight slides under the pressed button */
.rs-top .lang-btn{position:relative; z-index:1; transition:color .25s ease;}
.rs-top .lang-row.has-pill .lang-btn[aria-pressed="true"]{background:transparent; box-shadow:none;}
.rs-top .lang-row.has-pill::before{content:""; position:absolute; inset-block:4px; left:0; inline-size:var(--pill-w); transform:translateX(var(--pill-x));
  border-radius:8px; background:var(--pill-bg); box-shadow:var(--pill-shadow);}
.rs-top .lang-row.pill-live::before{transition:transform .42s cubic-bezier(.34,1.3,.64,1), inline-size .42s cubic-bezier(.34,1.3,.64,1);}
.rs-top .lang-btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}

/* ---- layout ------------------------------------------------------------- */
.rs-main{position:relative; z-index:1; padding:24px var(--gutter) max(28px, env(safe-area-inset-bottom));}
.rs-card{inline-size:100%; max-inline-size:620px; margin-inline:auto;}
.rs-sheet{position:relative;}
.rs-sheet h1.sr-only{position:absolute;}

/* Progress: a thin bar at the top of the sheet, replacing the pinned line. */
.rs-prog{margin:0 0 26px;}
.rs-prog[hidden]{display:none;}
.rs-prog-text{display:block; margin:0 0 9px; text-align:end; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; color:var(--stone);}
.rs-track{block-size:4px; border-radius:999px; background:var(--hairline); overflow:hidden;}
.rs-track .topprog-fill{block-size:100%; inline-size:0; border-radius:999px; background:var(--ink); transition:inline-size .6s cubic-bezier(.22,1,.36,1);}

@media (min-width:700px){
  body.rs{background:#151616;}
  .rs-bg{display:block;}
  .rs-main.frame::before,.rs-main.frame::after{display:none;}   /* the ruler rail is for phones only */
  /* header sits over the silk and scrolls away with the page, so it never runs under the card */
  .rs-top{position:absolute; inset-block-start:0; inset-inline:0; padding-inline:clamp(20px,4vw,64px); padding-block-start:max(28px, env(safe-area-inset-top));}
  .rs-top .brand{inline-size:400px;}
  .rs-top .lang-row{background:rgba(21,22,22,.38); border:1px solid rgba(255,255,255,.2); box-shadow:none;}
  .rs-top .lang-btn{color:rgba(255,255,255,.88);}
  .rs-top .lang-row{--pill-bg:#F6F6F4; --pill-fg:#151616; --pill-shadow:none;}
  .rs-top .lang-btn:focus-visible{outline-color:#fff;}
  /* a glass frame round a solid sheet */
  .rs-main{min-block-size:100svh; display:flex; align-items:center; padding:104px clamp(20px,4vw,64px) 56px;}
  .rs-card{margin-inline:0; max-inline-size:520px; padding:12px; border-radius:26px;
    background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.24); box-shadow:0 34px 90px rgba(4,6,6,.5);}
  .rs-sheet{background:var(--white); border-radius:18px; padding:32px 30px 20px;}
}
/* Tablet portrait: the card rises from the bottom, centred and wider. */
@media (min-width:700px) and (max-width:1023px){
  .rs-main{align-items:flex-end; padding-block-end:clamp(28px,5vh,56px);}
  .rs-card{margin-inline:auto; max-inline-size:680px;}
  .rs-sheet{padding:36px 38px 24px;}
}
@media (max-width:699px){
  /* the one-line lockup is very wide and thin: on a phone it takes the full row, with the language switch under it */
  .rs-top{flex-wrap:wrap; gap:16px;}
  .rs-top .brand{inline-size:100%; max-inline-size:360px;}
  .rs-top .lang-btn{min-inline-size:48px;}
}
@media (prefers-color-scheme:dark) and (max-width:699px){
  .rs-top .lang-row{--pill-bg:var(--mist); --pill-fg:var(--ink);}
}

/* ---- inside the sheet ---------------------------------------------------- */
.rs .form-title{font-size:clamp(1.3rem,2.4vw,1.6rem); line-height:1.3; margin:0 0 18px;}
.rs .label{margin-block-end:8px;}
.rs .rq{margin:0 0 24px;}
.rs .rq legend{color:var(--ink);}
.rs .field{margin:0;}

/* text inputs and the note box */
.rs .field input[type="text"], .rs .field textarea.note-box{
  inline-size:100%; min-block-size:52px; padding:0 14px; border:1px solid var(--hairline); border-radius:12px;
  background:var(--paper); color:var(--ink); font:inherit; font-size:15px;}
.rs .field textarea.note-box{padding:12px 14px; min-block-size:92px; line-height:1.5;}
.rs .field input[type="text"]:focus-visible, .rs .field textarea.note-box:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-color:transparent;}

/* answer pills: the about-you choices, yes/no, and the 0 to 5 scales */
.rs .chip{min-block-size:46px; padding:0 17px; border:1px solid var(--hairline); border-radius:999px; background:var(--white);
  color:var(--graphite); font-size:.92rem; font-weight:500; transition:background-color .15s, color .15s, border-color .15s;}
.rs .chip:hover{border-color:var(--ink);}
.rs .chip:has(input:checked){background:var(--ink); border-color:var(--ink); color:var(--paper); font-weight:500;}
.rs .chip:has(input:focus-visible){outline:2px solid var(--ink);}
.rs .rq-segopt{border-color:var(--hairline); border-radius:12px; background:var(--white); color:var(--graphite);}
.rs .rq-segopt:hover{border-color:var(--ink);}
.rs .rq-segopt:has(input:checked){background:var(--ink); border-color:var(--ink); color:var(--paper);}
.rs .rq-segopt:has(input:focus-visible){outline-color:var(--ink);}
.rs .rq-opt{border-color:var(--hairline); border-radius:12px; background:var(--white);}
.rs .rq-opt:has(input:checked){border-color:var(--ink); background:var(--mist); box-shadow:inset 0 0 0 1px var(--ink);}
.rs .rq-opt input{accent-color:var(--ink);}

/* the picture cards */
.rs .copt{border-color:var(--hairline); border-radius:14px;}
.rs .copt:hover{border-color:var(--ink);}
.rs .cgroup-h{color:var(--stone);}

/* consent */
.rs .consent-row{padding:14px; border:1px solid var(--hairline); border-radius:14px; background:var(--paper); margin-block-start:22px;}
.rs .consent-row input{accent-color:var(--ink);}
.rs .brief{margin-block-start:14px;}

/* the study ID on the last screen */
.rs .study-id{font-size:1.6rem;}

/* Next and Back stay in view at the foot of the sheet */
.rs .actions, .rs .wiz-nav{border-radius:0;}
.rs .actions{background:var(--white); border-block-start:1px solid var(--hairline); margin-block-start:10px; padding:14px 0 12px;}
.rs .btn{border-radius:12px; min-block-size:54px;}
.rs .btn-ghost{border:1px solid var(--hairline); background:var(--white);}
.rs .actions .btn-arrow{flex:1 1 auto; margin-inline-start:0; justify-content:center;}
.rs .actions .btn-ghost{flex:0 0 auto;}
.rs .rq-err, .rs .form-status{border-radius:12px;}

@media (max-width:699px){
  .rs .actions{background:var(--paper);}
  .rs .btn-ghost{background:var(--paper);}
  .rs .rq-opt, .rs .chip, .rs .rq-segopt{background:var(--white);}
}

@media (prefers-reduced-motion:reduce){ .rs-track .topprog-fill{transition:none;} }

/* ---- the language switch, animated (research-lang.js TFCLang.animate) --------
   Only the page content moves: the header and the silk keep their own
   snapshot, so they stay perfectly still. Out towards where the old language
   ends, in from where the new one starts. */
.rs-top{view-transition-name:rs-top;}
.rs-bg{view-transition-name:rs-bg;}
::view-transition-group(rs-top),::view-transition-group(rs-bg){animation:none;}
::view-transition-old(rs-top),::view-transition-old(rs-bg){display:none;}
::view-transition-new(rs-top),::view-transition-new(rs-bg){animation:none;}
/* The card glides across to its new side. Its two pictures (old language,
   new language) are never stretched: each keeps its real size, pinned to the
   top, and the moving box clips them to the card's rounded outline while the
   box itself grows or shrinks to the new height. The two cross-fade over the
   whole move, so the card stays solid in flight. Everything else just
   crossfades in place. */
.rs-card,.cap-full > .cap-wrap,.cap-ho > .cap-ho-grid,.cap-panel{view-transition-name:rs-card;}
html[data-lang-to]::view-transition-group(rs-card){animation-duration:.62s; animation-timing-function:cubic-bezier(.65,0,.35,1);
  overflow:clip; border-radius:26px;}
html[data-lang-to]::view-transition-old(rs-card),html[data-lang-to]::view-transition-new(rs-card){
  inline-size:100%; block-size:100%; object-fit:none; object-position:50% 0;}
/* one cross-fade over the whole move, so the card stays solid in flight */
html[data-lang-to]::view-transition-old(rs-card){animation:lang-fade-out .62s cubic-bezier(.65,0,.35,1) both;}
html[data-lang-to]::view-transition-new(rs-card){animation:lang-fade-in .62s cubic-bezier(.65,0,.35,1) both;}
html[data-lang-to]::view-transition-old(root){animation:lang-fade-out .2s ease-in both;}
html[data-lang-to]::view-transition-new(root){animation:lang-fade-in .3s ease-out .1s both;}
@keyframes lang-fade-out{to{opacity:0;}}
@keyframes lang-fade-in{from{opacity:0;}}
/* browsers without View Transitions: a short fade and slide of the content */
html.lang-out body > :not(.rs-top):not(.rs-bg),html.lang-in body > :not(.rs-top):not(.rs-bg){opacity:0; transform:translateX(var(--lang-out, 0));}
html[data-lang-to] body > :not(.rs-top):not(.rs-bg){transition:opacity .28s ease, transform .38s cubic-bezier(.22,1,.36,1);}
html.lang-in body > :not(.rs-top):not(.rs-bg){transform:translateX(var(--lang-in, 0)); transition:none;}
@media (prefers-reduced-motion:reduce){ .rs-top .lang-row.pill-live::before{transition:none;} }

/* ---- the 0 to 5 scales show their direction (owner, 30 Oct) ----------------
   People read the numbers as a rating and chose 4 meaning "fine". The words
   are the validated ones and stay as they are; the scale now shows that more
   means more problem: a level meter in each button, a calm-to-red ramp under
   the row, the chosen button tinted by its level, and a tick and a warning
   mark by the two end labels. --lvl (0 to 1) is set per button in research.js. */
.rs .rq-segopt{flex-direction:column; gap:7px; min-block-size:68px; padding-block:9px 10px;}
.rq-lvl{display:flex; gap:2.5px; align-items:flex-end; block-size:13px;}
.rq-lvl i{display:block; inline-size:4px; border-radius:1px; background:currentColor; opacity:.2;}
.rq-lvl i:nth-child(1){block-size:4px;} .rq-lvl i:nth-child(2){block-size:6.5px;} .rq-lvl i:nth-child(3){block-size:9px;}
.rq-lvl i:nth-child(4){block-size:11px;} .rq-lvl i:nth-child(5){block-size:13px;}
.rq-lvl i.on{opacity:1; background:color-mix(in srgb, var(--danger) calc(var(--lvl) * 100%), var(--stone));}
.rq-lvl:empty::before{content:""; display:block; inline-size:9px; block-size:1.5px; border-radius:1px; background:currentColor; opacity:.45;}
.rs .rq-segopt:has(input:checked){background:color-mix(in srgb, var(--danger) calc(var(--lvl) * 78%), var(--ink));
  border-color:color-mix(in srgb, var(--danger) calc(var(--lvl) * 78%), var(--ink)); color:var(--paper);}
.rs .rq-segopt:has(input:checked) .rq-lvl i{background:var(--paper); opacity:.35;}
.rs .rq-segopt:has(input:checked) .rq-lvl i.on{opacity:1;}
.rq-ramp{block-size:4px; border-radius:999px; margin-block-start:10px;
  background:linear-gradient(to right, color-mix(in srgb, var(--stone) 35%, transparent), color-mix(in srgb, var(--danger) 90%, transparent));}
[dir="rtl"] .rq-ramp{background:linear-gradient(to left, color-mix(in srgb, var(--stone) 35%, transparent), color-mix(in srgb, var(--danger) 90%, transparent));}
.rq-ends span{display:inline-flex; align-items:center; gap:6px;}
.rq-end-lo::before,.rq-end-hi::before{content:""; flex:none; inline-size:14px; block-size:14px; background:currentColor;
  -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat;}
.rq-end-lo::before{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.6' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M5 8.3l2 2 4-4.3' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.rq-end-hi{color:var(--danger);}
.rq-end-hi::before{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.8l6.6 11.8H1.4z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M8 6.4v3.4' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.7' r='.95'/%3E%3C/svg%3E");}

/* the nose cards: a tick box in every corner says "pick any" (owner, 30 Oct) */
.copt-tick{position:absolute; inset-block-start:8px; inset-inline-end:8px; inline-size:18px; block-size:18px; border-radius:5px;
  border:1.5px solid color-mix(in srgb, currentColor 40%, transparent); display:grid; place-items:center; pointer-events:none;}
.copt-tick::after{content:""; inline-size:9px; block-size:5px; border-inline-start:2px solid currentColor; border-block-end:2px solid currentColor;
  transform:translateY(-1px) rotate(-45deg); opacity:0;}
.copt:has(input:checked) .copt-tick{border-color:var(--paper); background:var(--paper);}
.copt:has(input:checked) .copt-tick::after{opacity:1; border-color:var(--ink);}
#concernHint{font-weight:500; color:var(--ink);}

/* The consent tick: the same custom box as welcome.html (.consent in styles.css),
   centred on the FIRST LINE of the statement rather than sitting above it. */
.rs .consent-row{align-items:flex-start; gap:14px;}
.rs .consent-row input{
  appearance:none; -webkit-appearance:none; flex:none; inline-size:22px; block-size:22px; cursor:pointer;
  margin:calc((1.5em - 22px) / 2) 0 0; border:1px solid var(--ink); border-radius:5px; background:var(--white);
  position:relative; transition:background .14s var(--ease), transform .14s var(--ease);
}
.rs .consent-row input:checked{background:var(--ink);}
.rs .consent-row input:checked::after{content:""; position:absolute; inset-inline-start:7px; inset-block-start:3px; inline-size:5px; block-size:10px;
  border:solid var(--paper); border-width:0 1.5px 1.5px 0; transform:rotate(45deg);}
[dir="rtl"] .rs .consent-row input:checked::after{inset-inline-start:auto; left:7px;}
.rs .consent-row input::before{content:""; position:absolute; inset:-11px;}   /* a bigger target for a thumb */
.rs .consent-row input:active{transform:scale(.92);}
.rs .consent-row input:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}