/* UA KIDS 360.
   Мова оформлення від aide.one: темно-синє чорнило, фірмовий градієнт
   зелений → блакитний, білі картки на світлому тлі, великі заокруглення.
   Три речі зроблено інакше і навмисно:

   1. Градієнт на кнопках приглушений. У них білий підпис лежить просто на
      яскравому зеленому — це приблизно 2:1 контрасту, тобто нечитабельно на
      сонці й для слабкого зору. Яскравий градієнт лишається там, де він нічого
      не підписує: смужка вгорі, позначка, заливка стовпчиків.
   2. Градієнт працює на зміст, а не поруч із ним: ним залиті стовпчики
      результатів. Фірмовий колір щось означає, а не прикрашає.
   3. Жодного шрифту з мережі. Сторінка має відкритися за три секунди на
      слабкому зв'язку, а web-шрифт — це ще один запит до того, як з'явиться
      перша літера. */

:root {
  --ink:      #16163f;   /* заголовки, основний текст */
  --muted:    #5a6478;
  --link:     #0f5c7f;   /* їхній глибокий бірюзовий — контраст 7:1 на білому */
  --line:     #e3e9ef;
  --page:     #f5f8f9;   /* тепло-світле тло, на якому лежать картки */
  --card:     #ffffff;
  --soft:     #eef4f6;
  --cream:    #fffcef;
  --warn-ink: #7a4f00;
  --warn-bg:  #fff8e6;

  /* Фірмовий градієнт — яскравий, для заливок і смужок */
  --brand: linear-gradient(135deg, #65cf49 0%, #07b3d4 100%);
  /* Той самий напрямок, приглушений — там, де зверху лежить білий текст */
  --brand-deep: linear-gradient(135deg, #1f7a48 0%, #0b5f7e 100%);

  --radius: 18px;
  --radius-lg: 26px;
  --shadow: 0 1px 2px rgba(22, 22, 63, .04), 0 8px 24px rgba(22, 22, 63, .06);
}

* { box-sizing: border-box; }

html { background: var(--page); }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 17px/1.62 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  overflow-wrap: break-word;         /* довге посилання не розсовує 360px */
  -webkit-text-size-adjust: 100%;
}

/* Фірмова смужка вгорі сторінки — підпис, який нічого не заступає */
body::before {
  content: ""; display: block; height: 4px; background: var(--brand);
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 12px; top: 12px; z-index: 20;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px;
}

/* ── шапка ─────────────────────────────────────────────────────────────── */
header {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 16px 20px;
}
.head-inner {
  max-width: 1040px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
}
.brand {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: inherit;
}
.mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--brand); flex: none;
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .02em;
}
.brand-text strong {
  display: block; font-size: 19px; letter-spacing: .01em; line-height: 1.15;
}
.brand-text span { display: block; color: var(--muted); font-size: 13.5px; }

nav ul {
  list-style: none; display: flex; flex-wrap: wrap; gap: 2px 20px;
  margin: 0; padding: 0;
}
nav a {
  color: var(--ink); text-decoration: none; font-size: 15px;
  padding: 6px 0; display: inline-block; border-bottom: 2px solid transparent;
}
nav a:hover, nav a:focus { border-bottom-color: #07b3d4; }

/* ── каркас ────────────────────────────────────────────────────────────── */
main { max-width: 840px; margin: 0 auto; padding: 28px 20px 64px; }

footer {
  border-top: 1px solid var(--line); background: var(--card);
  color: var(--muted); font-size: 14.5px;
  padding: 26px 20px 40px; text-align: center;
}
footer p { margin: 4px 0; }
footer a { color: var(--muted); }

h1 { font-size: clamp(26px, 5vw, 34px); line-height: 1.18; margin: 0 0 14px;
     letter-spacing: -.015em; }
h2 { font-size: clamp(20px, 3.4vw, 24px); margin: 34px 0 12px; letter-spacing: -.01em; }
h3 { font-size: 18px; margin: 0 0 6px; }
a { color: var(--link); }
p { margin: 0 0 14px; }

.kind {
  text-transform: uppercase; letter-spacing: .1em;
  font-size: 11.5px; font-weight: 700; color: #0b7f96; margin: 0 0 8px;
}
.lead { font-size: 19px; color: var(--muted); }
.sample, .note { color: var(--muted); font-size: 15px; }

/* ── картки ────────────────────────────────────────────────────────────── */
.hero, .card, .question, article > .body, .linked {
  background: var(--card);
}
.hero {
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 30px 26px; margin-bottom: 30px;
  position: relative; overflow: hidden;
}
.hero::after {                       /* натяк на фірмовий градієнт, не пляма */
  content: ""; position: absolute; inset: 0 0 auto auto;
  width: 190px; height: 190px; border-radius: 50%;
  background: var(--brand); opacity: .10;
  transform: translate(64px, -74px); pointer-events: none;
}
.hero h1 { margin-bottom: 10px; }
.hero p:last-child { margin-bottom: 0; }

.grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .grid { grid-template-columns: 1fr 1fr; } }

.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow);
}
.card h3 { line-height: 1.3; }
.card h3 a { text-decoration: none; color: var(--ink); }
.card h3 a:hover, .card h3 a:focus { color: var(--link); text-decoration: underline; }
.card p:last-child { margin-bottom: 0; }

.button {
  display: inline-block; background: var(--brand-deep); color: #fff;
  text-decoration: none; padding: 13px 26px; border-radius: 999px;
  font-weight: 650; box-shadow: 0 6px 18px rgba(11, 95, 126, .22);
}
.button:hover, .button:focus { filter: brightness(1.08); }

/* ── результати ────────────────────────────────────────────────────────── */
.results-head { margin-bottom: 6px; }
.question {
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px; margin: 18px 0;
}
.question h2 { margin-top: 0; }

.bars { list-style: none; margin: 16px 0 10px; padding: 0; }
.bars li { display: grid; grid-template-columns: 1fr; gap: 5px; margin-bottom: 16px; }
@media (min-width: 540px) {
  .bars li { grid-template-columns: 190px 1fr 96px; align-items: center; gap: 14px; }
}
.bars .label { font-size: 16px; }
.bars .track {
  position: relative; border-radius: 999px; height: 18px; overflow: hidden;
  background: var(--brand);          /* фірмовий колір усередині змісту */
}
.bars .rest {                        /* накладка на незаповнену частину доріжки */
  position: absolute; top: 0; right: 0; bottom: 0; background: var(--soft);
}
.bars .value { font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; }
.bars .value small { color: var(--muted); font-weight: 400; }

.withheld {
  background: var(--warn-bg); border-left: 4px solid #d9a520;
  color: var(--warn-ink); padding: 12px 16px; border-radius: 0 12px 12px 0;
  font-size: 15px; margin: 14px 0 0;
}

.linked {
  background: var(--cream); border: 1px solid #f0e6c8;
  padding: 14px 18px; border-radius: var(--radius);
}

article > .body { }
details { margin: 12px 0 2px; }
summary {
  cursor: pointer; color: var(--link); font-weight: 600; padding: 4px 0;
}

/* ── форми ─────────────────────────────────────────────────────────────── */
input {
  font: inherit; padding: 11px 15px; border: 1px solid var(--line);
  border-radius: 999px; min-width: 220px; max-width: 100%; background: var(--card);
}
button {
  font: inherit; font-weight: 650; padding: 11px 24px; border: 0;
  border-radius: 999px; background: var(--brand-deep); color: #fff; cursor: pointer;
}

:focus-visible { outline: 3px solid #35b7d6; outline-offset: 2px; border-radius: 4px; }

table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
img { max-width: 100%; height: auto; border-radius: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .card, .button { transition: box-shadow .18s ease, color .18s ease, filter .18s ease; }
  .card:hover { box-shadow: 0 2px 4px rgba(22,22,63,.05), 0 14px 34px rgba(22,22,63,.10); }
}

/* Стрічка демонстраційного режиму. Вигадані числа мають бути підписані
   вигаданими — на сайті, який учить не публікувати неперевірене, це не
   дрібниця оформлення. */
.demo {
  margin: 0; padding: 11px 20px; text-align: center;
  background: #16163f; color: #e8f6fb; font-size: 14.5px; line-height: 1.45;
}

/* Довжина стовпчика класом, а не атрибутом style: політика безпеки
   забороняє вбудовані стилі. Крок 1% — менш ніж піксель на доріжці. */
.bars .rest.p0{left:0%}
.bars .rest.p1{left:1%}
.bars .rest.p2{left:2%}
.bars .rest.p3{left:3%}
.bars .rest.p4{left:4%}
.bars .rest.p5{left:5%}
.bars .rest.p6{left:6%}
.bars .rest.p7{left:7%}
.bars .rest.p8{left:8%}
.bars .rest.p9{left:9%}
.bars .rest.p10{left:10%}
.bars .rest.p11{left:11%}
.bars .rest.p12{left:12%}
.bars .rest.p13{left:13%}
.bars .rest.p14{left:14%}
.bars .rest.p15{left:15%}
.bars .rest.p16{left:16%}
.bars .rest.p17{left:17%}
.bars .rest.p18{left:18%}
.bars .rest.p19{left:19%}
.bars .rest.p20{left:20%}
.bars .rest.p21{left:21%}
.bars .rest.p22{left:22%}
.bars .rest.p23{left:23%}
.bars .rest.p24{left:24%}
.bars .rest.p25{left:25%}
.bars .rest.p26{left:26%}
.bars .rest.p27{left:27%}
.bars .rest.p28{left:28%}
.bars .rest.p29{left:29%}
.bars .rest.p30{left:30%}
.bars .rest.p31{left:31%}
.bars .rest.p32{left:32%}
.bars .rest.p33{left:33%}
.bars .rest.p34{left:34%}
.bars .rest.p35{left:35%}
.bars .rest.p36{left:36%}
.bars .rest.p37{left:37%}
.bars .rest.p38{left:38%}
.bars .rest.p39{left:39%}
.bars .rest.p40{left:40%}
.bars .rest.p41{left:41%}
.bars .rest.p42{left:42%}
.bars .rest.p43{left:43%}
.bars .rest.p44{left:44%}
.bars .rest.p45{left:45%}
.bars .rest.p46{left:46%}
.bars .rest.p47{left:47%}
.bars .rest.p48{left:48%}
.bars .rest.p49{left:49%}
.bars .rest.p50{left:50%}
.bars .rest.p51{left:51%}
.bars .rest.p52{left:52%}
.bars .rest.p53{left:53%}
.bars .rest.p54{left:54%}
.bars .rest.p55{left:55%}
.bars .rest.p56{left:56%}
.bars .rest.p57{left:57%}
.bars .rest.p58{left:58%}
.bars .rest.p59{left:59%}
.bars .rest.p60{left:60%}
.bars .rest.p61{left:61%}
.bars .rest.p62{left:62%}
.bars .rest.p63{left:63%}
.bars .rest.p64{left:64%}
.bars .rest.p65{left:65%}
.bars .rest.p66{left:66%}
.bars .rest.p67{left:67%}
.bars .rest.p68{left:68%}
.bars .rest.p69{left:69%}
.bars .rest.p70{left:70%}
.bars .rest.p71{left:71%}
.bars .rest.p72{left:72%}
.bars .rest.p73{left:73%}
.bars .rest.p74{left:74%}
.bars .rest.p75{left:75%}
.bars .rest.p76{left:76%}
.bars .rest.p77{left:77%}
.bars .rest.p78{left:78%}
.bars .rest.p79{left:79%}
.bars .rest.p80{left:80%}
.bars .rest.p81{left:81%}
.bars .rest.p82{left:82%}
.bars .rest.p83{left:83%}
.bars .rest.p84{left:84%}
.bars .rest.p85{left:85%}
.bars .rest.p86{left:86%}
.bars .rest.p87{left:87%}
.bars .rest.p88{left:88%}
.bars .rest.p89{left:89%}
.bars .rest.p90{left:90%}
.bars .rest.p91{left:91%}
.bars .rest.p92{left:92%}
.bars .rest.p93{left:93%}
.bars .rest.p94{left:94%}
.bars .rest.p95{left:95%}
.bars .rest.p96{left:96%}
.bars .rest.p97{left:97%}
.bars .rest.p98{left:98%}
.bars .rest.p99{left:99%}
.bars .rest.p100{left:100%}