/* GLeX portal — shared stylesheet.
 *
 * Built on the GLeX design code v1.0 (design_code_GLeX): its tokens, its rules.
 * The two that shape most of what follows:
 *   - blue is action or law, never decoration (so no blue top bar, no blue
 *     section fills; the accent marks links, buttons, active state and norms);
 *   - the dotted field appears only under empty zones and previews, never
 *     behind text.
 *
 * Structure: tokens → base → layout → masthead/nav → blocks → footer.
 */

/* ── fonts ───────────────────────────────────────────────────────────────
   Self-hosted: the PWA has to work offline and without calling Google.      */
@font-face{
  font-family:"Golos Text"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("/fonts/golos-text-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Golos Text"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("/fonts/golos-text-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/fonts/jetbrains-mono-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  --blue:#2E7CBF; --blue-strong:#22608F; --blue-tint:#E4EFF9;
  --ink:#3F3F3F; --title:#333333; --muted:#6E7783; --faint:#9AA3AE;
  --surface:#FFFFFF; --canvas:#F4F7FA; --surface-alt:#F1F5F9;
  --line:#DDE3E9; --dot:#D7DEE5;
  --ok:#1F8A5B; --warn:#C77A12; --err:#C0392B;
  --ok-tint:#E6F4ED; --warn-tint:#FBF0DF; --err-tint:#FBEBE8;

  --font:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px;

  --r-field:8px; --r-card:12px; --r-sheet:18px; --r-pill:999px;

  --shadow-card:0 2px 6px rgba(34,60,90,.07);
  --shadow-lift:0 8px 24px rgba(34,60,90,.12);
  --focus:0 0 0 3px rgba(46,124,191,.28);

  --ease:cubic-bezier(.2,.7,.2,1); --fast:150ms; --slow:.7s;
  --wrap:1180px;
}

/* Dark theme, design code §11: the accent lightens (white text loses contrast
   on #2E7CBF) and shadows disappear — layers are separated by a border. */
:root[data-theme="dark"]{
  --blue:#4E9BDC; --blue-strong:#8FC2EA; --blue-tint:#1B3550;
  --ink:#E7EDF3; --title:#E7EDF3; --muted:#93A1AE; --faint:#8593A1;
  --surface:#18222C; --canvas:#101820; --surface-alt:#22303C;
  --line:#2A3742; --dot:#1E2A36;
  --ok:#52C08C; --warn:#E0A64A; --err:#E2766A;
  --ok-tint:#16302A; --warn-tint:#33280F; --err-tint:#3A1F1C;

  --shadow-card:none;
  --shadow-lift:none;
  --focus:0 0 0 3px rgba(78,155,220,.35);
}

/* ── base ───────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{min-height:100%}
body{
  margin:0;
  background:var(--canvas); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100svh;
}
img{max-width:100%}
a{color:var(--blue)}
h1,h2,h3{color:var(--title); letter-spacing:-.02em; text-wrap:balance}
h1{font-size:clamp(30px,4.4vw,46px); font-weight:800; line-height:1.08; letter-spacing:-.03em; margin:0}
h2{font-size:clamp(24px,2.6vw,30px); font-weight:700; line-height:1.2; margin:0}
h3{font-size:19px; font-weight:600; line-height:1.3; margin:0}
p{margin:0}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto;
      padding-inline:max(var(--s-4), env(safe-area-inset-left))}
main{flex:1 0 auto}

.skip{position:absolute; left:-9999px; top:0; z-index:100;
      background:var(--surface); color:var(--blue); padding:12px 18px;
      border-radius:var(--r-field)}
.skip:focus{left:var(--s-4); top:var(--s-4)}

.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.lead{font-size:clamp(17px,1.5vw,19px); color:var(--muted); text-wrap:pretty}

/* ── top strip: service links, not navigation ───────────────────────────── */
.topbar{background:var(--surface-alt); border-bottom:1px solid var(--line); font-size:13.5px}
.topbar__in{display:flex; align-items:center; justify-content:space-between;
            gap:var(--s-4); min-height:40px; flex-wrap:wrap}
.topbar__side{display:flex; align-items:center; gap:var(--s-1); margin-left:auto}

/* The beta notice sits where breadcrumbs sit — inside the page, aligned with its
   text. In the top strip it wrapped to a second line on a phone and read as a
   layout bug rather than as a status. */
/* ── supporter strip ─────────────────────────────────────────────────────
   The four lockups come from the programme's own site, where they are white
   artwork for a dark background — and all four are normalised to a 48px
   viewBox, so one height rules them all. On the light theme they are
   inverted: these are single-colour lockups, so inverting white gives black
   and the shapes stay exactly as drawn. That beats the alternatives — a
   monochrome filter flattens the trident and the Web3 Institute mark into
   silhouettes, and putting them on light plates in the dark theme made the
   row read as a strip of buttons. */
.support{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--s-3) var(--s-5); margin-block:0; padding-top:var(--s-5);
}
.support__label{
  font-family:var(--mono); font-size:1rem; font-weight:700; letter-spacing:.1em;
  color:var(--muted); text-transform:uppercase; white-space:nowrap;
}
.support__list{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--s-3) clamp(var(--s-4),3vw,var(--s-6)); margin:0; padding:0; list-style:none;
}
.support__list a{display:block; line-height:0; border-radius:var(--r-field)}
.support__logo{
  height:34px; width:auto; display:block; opacity:.85;
  transition:opacity var(--fast) var(--ease);
}
:root[data-theme="light"] .support__logo{filter:invert(1)}
@media (hover:hover){ .support__list a:hover .support__logo{opacity:1} }
.support__list a:focus-visible{outline:none; box-shadow:var(--focus)}
@media (max-width:640px){
  .support{gap:var(--s-2) var(--s-4); padding-top:var(--s-4)}
  .support__logo{height:26px}
}

.beta-note{
  /* Deliberately not a flex row: with a wrapped sentence the text becomes one
     full-width item and the dot gets pushed to the far edge. Inline flow keeps
     it in front of the first word on every screen.
     margin-inline stays auto — .wrap centres the column, and a bare `margin:0`
     here would silently pin the line to the left edge of the viewport. */
  display:block; margin-block:0; padding-top:var(--s-3);
  font-size:13.5px; font-weight:600; line-height:1.5; color:var(--muted);
  text-align:center; text-wrap:balance;
}
/* Blinking, like the status badge on the ArtIScope landing: a live service says
   so by moving. */
.beta-note .dot{
  display:inline-block; width:7px; height:7px; margin-inline-end:7px;
  border-radius:50%; background:var(--warn); vertical-align:middle;
  animation:blink 2.6s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1} 50%{opacity:.2}}
.beta-note + .breadcrumb{padding-top:var(--s-2)}

/* ── masthead ───────────────────────────────────────────────────────────── */
.masthead{position:sticky; top:0; z-index:40;
          background:var(--surface); border-bottom:1px solid var(--line)}
.masthead__in{display:flex; align-items:center; gap:var(--s-4);
              min-height:76px; padding-block:var(--s-2)}

.brand{display:flex; align-items:center; gap:var(--s-3); text-decoration:none; flex:none}
/* The logo is one indivisible lockup (mark + "LeX"), used as supplied. In the
   dark theme its graphite wordmark would sink into the background, so it sits
   on a light plate instead of being recoloured. */
.brand__logo{width:clamp(44px,6vw,56px); height:auto; display:block}
:root[data-theme="dark"] .brand__logo{background:#F7FAFC; border-radius:10px; padding:3px}
.brand__text{display:flex; flex-direction:column; line-height:1.15}
.brand__name{font-size:21px; font-weight:800; color:var(--title); letter-spacing:-.02em}
.brand__slogan{font-size:12.5px; color:var(--muted)}
@media (max-width:520px){ .brand__slogan{display:none} }

.nav{display:flex; align-items:center; gap:var(--s-1); margin-left:auto}
.nav a{
  position:relative;
  display:inline-flex; align-items:center; height:44px; padding:0 14px;
  border-radius:var(--r-field);
  color:var(--ink); text-decoration:none; font-size:16px; font-weight:600;
  transition:color var(--fast) var(--ease), background var(--fast) var(--ease);
}
@media (hover:hover){ .nav a:hover{color:var(--blue); background:var(--blue-tint)} }
.nav a:focus-visible{outline:none; box-shadow:var(--focus)}
.nav a[aria-current="page"]{color:var(--blue)}
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px;
  background:var(--blue); border-radius:2px;
}

.burger{display:none}

/* Below 900px the menu collapses into a panel under the masthead. */
@media (max-width:900px){
  .burger{
    display:inline-grid; place-items:center; width:48px; height:48px; margin-left:auto;
    border:1px solid var(--line); border-radius:var(--r-field);
    background:var(--surface); color:var(--ink); cursor:pointer;
  }
  .burger svg{width:22px; height:22px}
  .burger .i-close{display:none}
  .burger[aria-expanded="true"] .i-open{display:none}
  .burger[aria-expanded="true"] .i-close{display:block}

  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    background:var(--surface); border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-card);
    padding:var(--s-2) max(var(--s-4), env(safe-area-inset-left));
  }
  .nav[hidden]{display:none}
  .nav a{height:52px; border-radius:0; border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .nav a[aria-current="page"]::after{display:none}
  .nav a[aria-current="page"]{background:var(--blue-tint)}
}

/* ── controls ───────────────────────────────────────────────────────────── */
.ctl{
  display:inline-grid; place-items:center; width:40px; height:40px;
  border:1px solid transparent; border-radius:var(--r-field);
  background:transparent; color:var(--muted);
  cursor:pointer; text-decoration:none;
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.ctl svg{width:20px; height:20px; display:block; fill:currentColor}
.ctl--stroke svg{fill:none; stroke:currentColor; stroke-width:1.8;
                 stroke-linecap:round; stroke-linejoin:round}
@media (hover:hover){ .ctl:hover{color:var(--blue); border-color:var(--blue)} }
.ctl:focus-visible{outline:none; color:var(--blue); box-shadow:var(--focus)}
:root[data-theme="light"] .i-sun{display:none}
:root[data-theme="dark"]  .i-moon{display:none}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  height:48px; padding:0 22px;
  border:1.5px solid var(--blue); border-radius:var(--r-field);
  background:var(--surface); color:var(--blue);
  font-family:inherit; font-size:15.5px; font-weight:600; line-height:1;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9;
         stroke-linecap:round; stroke-linejoin:round}
@media (hover:hover){ .btn:hover{background:var(--blue-tint)} }
.btn:focus-visible{outline:none; box-shadow:var(--focus)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55; cursor:default}

/* One primary action per screen (design code rule 04). */
.btn--primary{background:var(--blue); color:#fff}
:root[data-theme="dark"] .btn--primary{color:#0B1219}
@media (hover:hover){ .btn--primary:hover{background:var(--blue-strong)} }
.btn--sm{height:40px; padding:0 16px; font-size:14.5px}

.badge{
  display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px;
  border-radius:var(--r-pill); background:var(--blue-tint); color:var(--blue-strong);
  font-size:12.5px; font-weight:600; line-height:1; white-space:nowrap;
}
.badge--ok{background:var(--ok-tint); color:var(--ok)}
.badge--warn{background:var(--warn-tint); color:var(--warn)}
.badge--err{background:var(--err-tint); color:var(--err)}
.badge--quiet{background:var(--surface-alt); color:var(--muted)}

.chip{
  display:inline-block; padding:8px 14px; margin:0;
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--surface); color:var(--muted);
  font:inherit; font-size:14.5px; text-align:left; cursor:pointer;
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
@media (hover:hover){ .chip:hover{color:var(--blue); border-color:var(--blue)} }
.chip:focus-visible{outline:none; box-shadow:var(--focus)}
.chip[aria-pressed="true"]{color:var(--blue); border-color:var(--blue); background:var(--blue-tint)}

/* ── sections and grids ─────────────────────────────────────────────────── */
.section{padding-block:clamp(var(--s-6),5vw,var(--s-8))}
.section--alt{background:var(--surface-alt); border-block:1px solid var(--line)}
.section__head{max-width:70ch; margin-bottom:var(--s-6)}
.eyebrow{
  display:block; margin-bottom:var(--s-3);
  font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:.18em;
  color:var(--blue); text-transform:uppercase;
}
.section__head .lead{margin-top:var(--s-3)}

.grid{display:grid; gap:var(--s-4)}
@media (min-width:700px){
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:980px){
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); box-shadow:var(--shadow-card);
  padding:var(--s-5);
}
.card > * + *{margin-top:var(--s-3)}
.card__meta{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3)}
.card__num{font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; color:var(--faint)}

a.card{display:block; text-decoration:none; color:inherit;
       transition:border-color var(--fast) var(--ease), transform var(--fast) var(--ease),
                  box-shadow var(--fast) var(--ease)}
@media (hover:hover){
  a.card:hover{border-color:var(--blue); transform:translateY(-2px); box-shadow:var(--shadow-lift)}
  a.card:hover .card__more{color:var(--blue-strong)}
}
a.card:focus-visible{outline:none; box-shadow:var(--focus)}
.card__more{color:var(--blue); font-weight:600; font-size:15px}

/* Numbered list — the "01 · claim" rhythm of the design code. */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:var(--s-4)}
.steps li{display:grid; grid-template-columns:auto 1fr; gap:var(--s-3); align-items:baseline}
.steps .n{font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; color:var(--faint)}
.steps .t{font-size:16px; line-height:1.55; color:var(--muted)}
.steps b{color:var(--title); font-weight:600}

.stats{display:grid; gap:var(--s-4); grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:860px){ .stats{grid-template-columns:repeat(4,minmax(0,1fr))} }
.stat__n{font-size:clamp(28px,3.4vw,38px); font-weight:800; color:var(--blue); line-height:1.1}
.stat__t{font-size:14.5px; color:var(--muted); margin-top:var(--s-1)}

/* Honest framing for anything that is not live yet. */
.note{
  display:flex; gap:var(--s-3); align-items:flex-start;
  border:1px solid var(--line); border-left:3px solid var(--warn);
  border-radius:var(--r-card); background:var(--surface);
  padding:var(--s-4) var(--s-5); font-size:15px; color:var(--muted);
}
.note b{color:var(--title)}
.note--info{border-left-color:var(--blue)}

.breadcrumb{display:flex; flex-wrap:wrap; gap:var(--s-2); align-items:center;
            font-size:14px; color:var(--faint); padding-top:var(--s-5)}
.breadcrumb a{color:var(--muted); text-decoration:none}
@media (hover:hover){ .breadcrumb a:hover{color:var(--blue)} }

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{display:grid; align-items:center; gap:clamp(var(--s-6),5vw,var(--s-8));
      padding-block:clamp(var(--s-6),5vw,var(--s-8));
      animation:rise var(--slow) var(--ease) both}
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@media (min-width:920px){ .hero{grid-template-columns:minmax(0,1.06fr) minmax(360px,.94fr)} }
.hero h1 em{font-style:normal; color:var(--blue)}
.hero .lead{margin-top:var(--s-5); max-width:48ch}
.hero__actions{display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6)}

.page-head{padding-block:var(--s-6) var(--s-5)}
.page-head .lead{margin-top:var(--s-4); max-width:64ch}

/* Dotted field: previews and empty states only. */
.preview{
  margin:0; border-radius:var(--r-sheet); padding:clamp(var(--s-4),3vw,var(--s-6));
  background-color:var(--canvas);
  background-image:radial-gradient(circle,var(--dot) 1.5px,transparent 1.5px);
  background-size:32px 32px;
  display:grid; gap:var(--s-3);
}
:root[data-theme="dark"] .preview{border:1px solid var(--line)}
.preview figcaption{font-family:var(--mono); font-size:12px; letter-spacing:.14em;
                    color:var(--faint); text-align:right; padding-top:var(--s-1)}

/* ── dialogue and norms (design code §06–07) ────────────────────────────── */
.bubble{max-width:88%; font-size:16px; line-height:1.5; padding:12px 16px}
.bubble--me{justify-self:end; background:var(--blue); color:#fff;
            border-radius:18px 18px 6px 18px}
:root[data-theme="dark"] .bubble--me{color:#0B1219; font-weight:500}
.bubble--glex{justify-self:start; background:var(--surface-alt); color:var(--ink);
              border-radius:18px 18px 18px 6px; white-space:pre-wrap}
.answer{display:grid; grid-template-columns:auto 1fr; gap:var(--s-3); align-items:start}
.avatar{width:34px; height:34px; flex:none}
.avatar img{width:100%; height:100%; object-fit:contain; display:block}
:root[data-theme="dark"] .avatar img{background:#F7FAFC; border-radius:8px}

.norm{border-left:3px solid var(--blue); padding:var(--s-5); display:grid; gap:10px}
.norm__top{display:flex; align-items:center; justify-content:space-between; gap:var(--s-4)}
.norm__ref{font-family:var(--mono); font-size:14px; font-weight:500; color:var(--blue)}
.norm__act{font-size:17px; font-weight:600; line-height:1.3; color:var(--title)}
.norm__text{margin:0; font-size:15.5px; line-height:1.55; color:var(--muted)}
.norm__src{font-size:15px; font-weight:600; color:var(--blue); text-decoration:none}
@media (hover:hover){ .norm__src:hover{text-decoration:underline} }

/* ── tabs ───────────────────────────────────────────────────────────────── */
.tabs{display:flex; gap:var(--s-1); border-bottom:1px solid var(--line);
      overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  appearance:none; background:transparent; border:0; border-bottom:2px solid transparent;
  padding:var(--s-3) var(--s-4); margin-bottom:-1px;
  font:inherit; font-size:16px; font-weight:600; color:var(--muted);
  cursor:pointer; white-space:nowrap;
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.tab small{display:block; font-size:12px; font-weight:500; color:var(--faint)}
@media (hover:hover){ .tab:hover{color:var(--blue)} }
.tab:focus-visible{outline:none; box-shadow:var(--focus)}
.tab[aria-selected="true"]{color:var(--blue); border-bottom-color:var(--blue)}
.tabpanel{padding-top:var(--s-6)}
.tabpanel[hidden]{display:none}

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot{margin-top:var(--s-8); background:var(--surface); border-top:1px solid var(--line)}
.foot__in{display:grid; gap:var(--s-6); padding-block:var(--s-6)}
@media (min-width:860px){ .foot__in{grid-template-columns:1.4fr 1fr 1fr} }
.foot h4{margin:0 0 var(--s-3); font-size:14px; letter-spacing:.06em;
         text-transform:uppercase; color:var(--faint); font-weight:600}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--s-2)}
.foot a{color:var(--muted); text-decoration:none; font-size:15.5px}
@media (hover:hover){ .foot a:hover{color:var(--blue)} }
.foot__bottom{display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-5);
              justify-content:space-between; align-items:center;
              border-top:1px solid var(--line); padding-block:var(--s-4);
              font-size:14px; color:var(--faint)}
.foot__tag{font-family:var(--mono); font-size:12px; letter-spacing:.1em}
/* Two unlisted ways into the prototypes live in the bottom line: the
   copyright opens the clinic CRM, the slogan opens the citizen chat. Both have
   to read as the plain text they replaced: same colour, size and cursor, no
   hover change — only a keyboard focus ring gives them away, which is the one
   affordance accessibility requires us to keep. */
.foot .foot__copy,.foot a.foot__tag{color:inherit; cursor:text}
.foot .foot__copy{font-size:inherit}
.foot a.foot__tag{font-size:12px}
@media (hover:hover){ .foot .foot__copy:hover,.foot a.foot__tag:hover{color:inherit} }
.foot .foot__copy:focus-visible,.foot a.foot__tag:focus-visible{outline:none; box-shadow:var(--focus); border-radius:4px}
/* Scoped under .foot: the plain `.foot ul` rule above is more specific than a
   bare .social and would otherwise stack the icons into a column. */
.foot .social,.social{display:flex; gap:var(--s-2); margin:0; padding:0; list-style:none}
.social .ctl{border-color:var(--line)}
@media (max-width:640px){ .foot__bottom{justify-content:center; text-align:center} }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
}

/* ── GLeX.AI page: chat, expert and student tabs ────────────────────────── */
.chat-app{display:grid; gap:var(--s-5); align-items:start}
@media (min-width:1000px){ .chat-app{grid-template-columns:minmax(0,1fr) 320px} }

.thread{display:grid; gap:var(--s-4); align-content:start}
.thread__empty{
  border-radius:var(--r-sheet); padding:clamp(var(--s-5),4vw,var(--s-7));
  background-color:var(--canvas);
  background-image:radial-gradient(circle,var(--dot) 1.5px,transparent 1.5px);
  background-size:32px 32px;
  text-align:center; color:var(--muted);
}
.thread__empty h3{margin-bottom:var(--s-2)}

.msg{display:grid; gap:var(--s-3)}
.msg--me{justify-items:end}
/* Not uppercased: the line carries a model name and a unit ("2.4 с"), and
   uppercase turns that unit into what looks like another letter. */
.msg__meta{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
           color:var(--faint)}

/* "Searching for norms · usually 3–5 seconds" (design code §10). */
.pending{display:flex; align-items:center; gap:var(--s-3); color:var(--muted); font-size:15px}
.spinner{width:18px; height:18px; flex:none; border-radius:50%;
         border:2px solid var(--line); border-top-color:var(--blue);
         animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.ask{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-3);
     margin-top:var(--s-5); align-items:stretch}
.ask .btn{align-self:end}
.ask textarea{
  width:100%; min-height:104px; max-height:220px; padding:14px 16px; resize:none;
  border:1px solid var(--line); border-radius:var(--r-field);
  background:var(--surface); color:var(--ink);
  font:inherit; font-size:16px; line-height:1.45;
}
.ask textarea:focus{outline:none; border-color:var(--blue); box-shadow:var(--focus)}
.ask textarea::placeholder{color:var(--faint)}
@media (max-width:560px){ .ask{grid-template-columns:1fr} .ask .btn{width:100%} }

.chips-row{display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-4)}
.chips-row__title{width:100%; font-family:var(--mono); font-size:11.5px;
                  letter-spacing:.14em; color:var(--faint); text-transform:uppercase}

.status-line{display:flex; align-items:center; gap:var(--s-2); font-size:14.5px; color:var(--muted)}
.status-line .dot{width:8px; height:8px; border-radius:50%; background:var(--faint); flex:none}
.dot--ok{background:var(--ok)} .dot--warn{background:var(--warn)} .dot--err{background:var(--err)}

.side-card{display:grid; gap:var(--s-4)}
.side-card .card{padding:var(--s-4) var(--s-5)}
.side-card h4{margin:0 0 var(--s-2); font-size:14px; letter-spacing:.06em;
              text-transform:uppercase; color:var(--faint); font-weight:600}
.side-card p{font-size:14.5px; color:var(--muted)}
@media (min-width:1000px){ .chat-app__side{position:sticky; top:96px} }

/* Person rows — experts tab, and reusable for the team block. */
.person{display:grid; grid-template-columns:auto 1fr; gap:var(--s-3); align-items:start}
.person__ava{width:46px; height:46px; border-radius:50%; flex:none;
             display:grid; place-items:center;
             background:var(--blue-tint); color:var(--blue-strong);
             font-weight:700; font-size:16px}
.person__name{font-weight:600; color:var(--title)}
.person__role{font-size:14px; color:var(--muted)}

.flashcard{cursor:pointer; user-select:none}
.flashcard__q{font-weight:600; color:var(--title)}
.flashcard__a{font-size:15px; color:var(--muted); margin-top:var(--s-3)}
.flashcard[aria-expanded="false"] .flashcard__a{display:none}
.flashcard__hint{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em;
                 color:var(--faint); text-transform:uppercase; margin-top:var(--s-3)}

.scheme{width:100%; height:auto; display:block}
.scheme text{font-family:var(--font); font-size:13px; fill:var(--muted)}
.scheme .node{fill:var(--surface); stroke:var(--blue); stroke-width:1.5}
.scheme .node-title{fill:var(--title); font-weight:600}
.scheme .edge{stroke:var(--line); stroke-width:1.5; fill:none}
.scheme .edge-label{font-size:11px; fill:var(--faint); font-family:var(--mono)}

/* Article numbers inside the scheme: the accent, and it follows the theme —
   an inline fill attribute would lose to `.scheme text` anyway. */
.scheme .ref{fill:var(--blue)}