/* Product workspace v2. Layout, composition and interaction surfaces. */
:root {
  --ink: #15233b;
  --ink-soft: #737381;
  --paper: #f2f5f9;
  --card: #fff;
  --line: #e9e9f0;
  --road: #1b5fd9;
  --road-deep: #14418f;
  --sign: #ffc93c;
  --go: #224184;
  --stop: #c14855;
  --warn: #9b6a28;
  --surface-soft: #e7edfc;
  --good-bg: #edf1f8;
  --bad-bg: #fff1f2;
  --shadow: 0 4px 16px #20263904;
  --radius: 16px;
  --body-font: 'Assistant',Arial,sans-serif;
}
body {
  font-size: calc(16px * var(--font-scale));
  background: var(--paper);
}
h1,h2,h3,h4 {
  letter-spacing: -.025em;
}
h1 {
  font-weight: 700;
}
.logo-text {
  letter-spacing: -.5px;
  font-size: calc(24px * var(--font-scale, 1));
}
.logo-text__dot {
  font-weight: 700;
  color: var(--road);
}
.btn {
  border-radius: 9px;
  font-size: calc(15px * var(--font-scale, 1));
  min-height: 46px;
  font-weight: 600;
  gap: 10px;
}
.btn-primary {
  box-shadow: 0 3px 7px #1b5fd918;
}
.btn-ghost {
  background: var(--card);
}
.btn-ghost:hover {
  background: var(--surface-soft);
}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible {
  outline-color: var(--road);
}
.btn-lg {
  min-height: 54px;
  padding-inline: 25px;
  font-size: calc(17px * var(--font-scale, 1));
}
.btn-sm {
  min-height: 37px;
  font-size: calc(13px * var(--font-scale, 1));
}
.card {
  border-radius: 16px;
}
.topbar {
  background: #fff;
  border-color: var(--line);
}
.topbar-inner {
  max-width: 1232px;
}
.eyebrow {
  font-size: calc(12px * var(--font-scale, 1));
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-soft);
}
.section-title {
  font-size: calc(32px * var(--font-scale, 1));
}
.product-topbar {
  display: none;
}
.profile-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: #f4e9db;
  color: #896449;
  border-radius: 11px;
  font-weight: 600;
}
.member-profile {
  display: none;
}
/* Desktop shell */
@media(min-width:1100px) {
  .is-member {
    padding-inline-start: 228px;
  }
  .is-member .topbar {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    width: 228px;
    height: 100dvh;
    border: 0;
    border-inline-end: 1px solid var(--line);
    z-index: 70;
  }
  .is-member .topbar-inner {
    padding: 30px 18px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    flex-wrap: nowrap;
  }
  .is-member .logo {
    padding: 0 12px;
    min-height: 40px;
  }
  .is-member .nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    gap: 6px;
    width: 100%;
    flex: 1;
    overflow-y: auto;
  }
  .is-member .nav::before {
    content: 'סביבת הלמידה';
    font-size: calc(10px * var(--font-scale, 1));
    letter-spacing: .06em;
    color: #6a6c77;
    padding: 10px 14px 6px;
  }
  .is-member .nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: calc(14px * var(--font-scale, 1));
    font-weight: 600;
    padding: 13px 15px;
    color: #6c6b79;
    border-radius: 9px;
    min-height: 46px;
  }
  .is-member .nav a svg {
    width: 19px;
    height: 19px;
  }
  .is-member .nav a.active {
    color: var(--road);
    background: #e7edfc;
    box-shadow: none;
  }
  .is-member .nav a:hover {
    background: #f2f6fd;
  }
  .is-member .nav a.active::after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--road);
    margin-inline-start: auto;
  }
  .is-member .nav-bell {
    /* היה כאן ריבוע 40 על 40 בלי תווית, בין פריטים שכולם
       שורות עם טקסט. נראה כמו שגיאת רינדור ולא היה ברור
       מה הכפתור עושה. עכשיו שורה מלאה כמו השאר. */
    margin: 2px 10px;
    width: auto;
    height: auto;
    min-height: 44px;
  }
  .is-member #navLogout {
    align-self: start;
    margin-inline-start: 12px;
    background: transparent;
    border: 0;
    color: var(--ink-soft);
  }
  .is-member .member-profile {
    display: flex;
    align-items: center;
    gap: 9px;
    border-top: 1px solid var(--line);
    padding: 19px 6px 0;
    color: var(--ink);
    text-decoration: none;
  }
  .member-profile>span:nth-child(2) {
    flex: 1;
    min-width: 0;
  }
  .member-profile b {
    display: block;
    font-size: calc(13px * var(--font-scale, 1));
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .member-profile small {
    display: block;
    font-size: calc(10px * var(--font-scale, 1));
    color: var(--ink-soft);
    margin-top: 3px;
  }
  .is-member .product-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    padding: 0 42px;
    border-bottom: 1px solid var(--line);
    font-size: calc(12px * var(--font-scale, 1));
    background: #fff;
  }
  .product-topbar>span {
    display: flex;
    gap: 14px;
    align-items: center;
  }
  .product-wordmark {
    font-weight: 600;
    color: #6b6d79;
  }
  .product-divider {
    color: #6b6c70;
  }
  .product-topbar a {
    color: var(--ink-soft);
    text-decoration: none;
  }
  .product-topbar a span {
    margin-inline-start: 8px;
  }
  .is-member #view {
    max-width: 1230px;
    padding: 36px 42px 70px;
  }
  .is-member footer>.container {
    padding-inline: 42px;
  }
  .is-member.focus-mode {
    padding-inline-start: 0;
  }
  .focus-mode .product-topbar {
    display: none;
  }
}
.workspace-head {
  margin-bottom: 28px;
  align-items: center;
}
.workspace-head .eyebrow {
  margin-bottom: 7px;
}
.workspace-head h1 {
  font-size: calc(31px * var(--font-scale, 1));
  margin-bottom: 8px;
}
.workspace-head p {
  font-size: calc(14px * var(--font-scale, 1));
}
.workspace-head .btn {
  font-size: calc(13px * var(--font-scale, 1));
  min-height: 42px;
}
.metrics-strip {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 8px;
  margin-bottom: 28px;
}
.metrics-strip>div {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding-inline: 12px;
}
.metrics-strip>div+div {
  border-inline-start: 1px solid var(--line);
}
.metric-icon,.way-icon {
  width: 43px;
  height: 43px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.violet {
  background: #e7edfc;
  color: #2a4fc0;
}
.peach {
  background: #fff0e5;
  color: #91613a;
}
.mint {
  background: #eaeff8;
  color: #357955;
}
.sky {
  background: #eaf3fc;
  color: #457092;
}
.metrics-strip small {
  font-size: calc(11px * var(--font-scale, 1));
  color: var(--ink-soft);
  display: block;
  margin-bottom: 2px;
}
.metrics-strip b {
  font-size: calc(27px * var(--font-scale, 1));
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.2;
}
.metrics-strip em {
  font-size: calc(11px * var(--font-scale, 1));
  font-weight: 400;
  font-style: normal;
  margin-inline-start: 5px;
  color: var(--ink-soft);
}
.workspace-grid {
  grid-template-columns: minmax(0,1fr) 285px;
  gap: 25px;
}
.workspace-primary {
  gap: 0;
}
.workspace-aside {
  gap: 20px;
}
.today-card {
  background: #e9eefb;
  color: var(--ink);
  min-height: 285px;
  padding: 30px;
  border-radius: 17px;
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: stretch;
  border: 1px solid #dbe4f8;
  overflow: hidden;
}
.today-card::after {
  display: none;
}
.today-in {
  max-width: 64%;
  display: flex;
  gap: 0;
  align-items: start;
  z-index: 1;
}
.today-lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid #c6d5f2;
  border-radius: 6px;
  font-size: calc(11px * var(--font-scale, 1));
  color: #2e5bc7;
  background: #eff4ff;
  margin-bottom: 17px;
}
.today-h {
  font-size: calc(33px * var(--font-scale, 1));
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.02em;
}
.today-sub {
  font-size: calc(13px * var(--font-scale, 1));
  color: #686d7f;
  line-height: 1.7;
  max-width: 32ch;
  margin: 13px 0 22px;
}
.today-go {
  background: var(--road);
  color: #fff;
  padding: 11px 18px;
  gap: 19px;
  border-radius: 8px;
  font-size: calc(13px * var(--font-scale, 1));
  box-shadow: 0 5px 12px #1b5fd915;
}
.daily-art {
  width: 190px;
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  margin-inline-end: -8px;
  pointer-events: none;
}
.orbit {
  position: absolute;
  border: 1px solid #cddcf4;
  border-radius: 50%;
  width: 270px;
  height: 270px;
  left: -100px;
  top: -10px;
}
.orbit-two {
  width: 220px;
  height: 220px;
  left: -73px;
  top: 15px;
}
.orbit-three {
  width: 170px;
  height: 170px;
  left: -48px;
  top: 40px;
}
.daily-stack {
  position: absolute;
  width: 128px;
  height: 166px;
  background: #fff;
  border-radius: 14px;
  top: 35px;
  left: 12px;
  border: 1px solid #e7ebfa;
  box-shadow: 0 9px 20px #41558c10;
  transform: rotate(-10deg);
}
.daily-stack.back {
  transform: rotate(9deg);
  left: -9px;
  top: 48px;
  background: #bfd2f3;
  border-color: #aec6ef;
}
.daily-stack.front {
  padding: 19px 15px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.daily-stack.front>span:first-child {
  font-size: calc(9px * var(--font-scale, 1));
  color: #8593b5;
}
.daily-stack b {
  font-size: calc(24px * var(--font-scale, 1));
  line-height: 1.13;
}
.mini-track {
  display: flex;
  gap: 4px;
}
.mini-track i {
  height: 4px;
  background: #d4e0f7;
  width: 20px;
  border-radius: 3px;
}
.mini-track i:first-child,.mini-track i:nth-child(2) {
  background: #4a72d4;
}
.daily-check {
  position: absolute;
  bottom: -14px;
  right: -13px;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background: #ffc93c;
  border: 4px solid #e9eefb;
  display: grid;
  place-items: center;
  color: #3a2600;
}
.daily-spark {
  position: absolute;
  top: 12px;
  left: 132px;
  color: #4a72d4;
  font-size: calc(27px * var(--font-scale, 1));
}
.section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 29px 0 16px;
}
.section-bar h2 {
  font-size: calc(18px * var(--font-scale, 1));
  font-weight: 700;
  letter-spacing: 0;
}
.section-bar>span {
  font-size: calc(11px * var(--font-scale, 1));
  color: #6b6d76;
}
.section-bar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--road);
  font-size: calc(12px * var(--font-scale, 1));
  text-decoration: none;
}
.ways-grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 13px;
}
.way {
  padding: 20px 21px;
  min-height: 160px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 13px;
  gap: 0;
  transition: border-color .18s,box-shadow .18s,transform .18s;
}
.way::after {
  display: none;
}
.way:hover {
  transform: translateY(-3px);
  background: #fff;
  border-color: #b3c7ee;
  box-shadow: 0 8px 18px #2a3f6408;
}
.way .way-icon {
  width: 35px;
  height: 35px;
  border-radius: 10px;
  margin-bottom: 14px;
}
.way-icon svg {
  width: 19px;
  height: 19px;
}
.way b {
  font-size: calc(16px * var(--font-scale, 1));
  margin-bottom: 5px;
}
.way>span:not(.way-icon) {
  font-size: calc(12px * var(--font-scale, 1));
  color: #878a97;
}
.way>i {
  position: absolute;
  inset-inline-end: 19px;
  top: 24px;
  color: #6a6c76;
}
.topic-panel {
  margin-top: 8px;
}
.topic-line {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 15px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  background: var(--card);
  font-size: calc(12px * var(--font-scale, 1));
}
.topic-line>span {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 1;
  min-width: 130px;
}
.topic-line>span svg {
  color: #6a6d7b;
}
.topic-line>b {
  font-weight: 600;
}
.topic-track {
  width: 110px;
  height: 5px;
  background: #edeef4;
  border-radius: 4px;
  overflow: hidden;
}
.topic-track i {
  display: block;
  height: 100%;
  background: #6d8fd8;
  border-radius: inherit;
}
.topic-line>svg {
  color: #696b74;
}
.topic-empty {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 22px;
  color: #6a6d7b;
}
.topic-empty>div {
  flex: 1;
}
.topic-empty b {
  display: block;
  color: var(--ink);
  font-size: calc(13px * var(--font-scale, 1));
}
.topic-empty p {
  font-size: calc(12px * var(--font-scale, 1));
  color: var(--ink-soft);
  margin-top: 4px;
}
.readiness {
  padding: 23px;
  text-align: center;
  border-radius: 15px;
}
.readiness-top {
  margin: 0;
  text-align: start;
}
.readiness-top h3 {
  font-size: calc(15px * var(--font-scale, 1));
  margin: 0;
}
.readiness-top>svg {
  color: #686c7c;
}
.readiness-gauge {
  width: 162px;
  height: 162px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#3a63cc var(--score),#eaf0fb 0);
  margin: 25px auto 22px;
  transform: rotate(-90deg);
}
.readiness-gauge>div {
  width: 143px;
  height: 143px;
  background: var(--card);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transform: rotate(90deg);
}
.readiness-gauge b {
  font-size: calc(42px * var(--font-scale, 1));
  line-height: 1.1;
  letter-spacing: -1px;
  font-weight: 600;
}
.readiness-gauge small {
  font-size: calc(19px * var(--font-scale, 1));
}
.readiness-gauge span {
  font-size: calc(10px * var(--font-scale, 1));
  color: #6a6d77;
  margin-top: 8px;
}
.readiness h4 {
  font-size: calc(14px * var(--font-scale, 1));
  letter-spacing: 0;
  margin-bottom: 8px;
}
.readiness p {
  font-size: calc(12px * var(--font-scale, 1));
  line-height: 1.8;
}
.readiness .btn {
  margin-top: 21px;
  width: 100%;
  min-height: 38px;
  font-size: calc(12px * var(--font-scale, 1));
}
.focus-prompt {
  background: #eceff4;
  border: 1px solid #dfe4eb;
  border-radius: 15px;
  padding: 25px;
  position: relative;
}
.focus-prompt-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: #d8dfe8;
  border-radius: 10px;
  color: #546172;
  margin-bottom: 14px;
}
.focus-prompt .eyebrow {
  font-size: calc(10px * var(--font-scale, 1));
  color: #596471;
  margin-bottom: 8px;
}
.focus-prompt h3 {
  font-size: calc(23px * var(--font-scale, 1));
  line-height: 1.2;
  color: #3f4854;
  margin-bottom: 10px;
}
.focus-prompt p {
  font-size: calc(12px * var(--font-scale, 1));
  color: #646e5f;
  line-height: 1.8;
}
.focus-prompt a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: calc(11px * var(--font-scale, 1));
  color: #556272;
  text-decoration: none;
  margin-top: 18px;
}
.small-note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: calc(11px * var(--font-scale, 1));
  color: #6a6d75;
  padding: 0 8px;
}
.small-note svg {
  color: #696c76;
}
/* Purpose-built learning layouts */
.question-card,.sess-card,.trial-card,.feed-card {
  border: 1px solid var(--line);
  border-radius: 17px;
  box-shadow: 0 5px 20px #24304604;
  padding: 31px;
}
.question-card h3,.sess-q,.trial-q,.feed-q {
  font-weight: 600;
  font-size: calc(26px * var(--font-scale, 1));
  line-height: 1.55;
  max-width: 35ch;
  margin: 23px 0 27px;
  letter-spacing: 0;
}
.q-cat,.sess-cat,.trial-cat {
  font-size: calc(11px * var(--font-scale, 1));
  color: #686c7a;
  letter-spacing: 0;
}
.question-card .row>.q-cat {
  padding: 5px 9px;
  border-radius: 5px;
  background: #f5f8fd;
}
.answers,.sess-answers,.trial-answers,.feed-answers {
  gap: 11px;
}
.answer,.sess-ans,.trial-ans,.feed-ans {
  border-radius: 10px;
  min-height: 66px;
  border-color: #e1e3ed;
  background: #fff;
  font-size: calc(16px * var(--font-scale, 1));
  padding: 15px 17px;
  box-shadow: none;
}
.answer::before,.sess-k,.trial-k,.feed-ans-letter {
  background: #f6f9fd;
  border: 0;
  color: #696c79;
  min-width: 29px;
  height: 29px;
  border-radius: 7px;
  font-size: calc(12px * var(--font-scale, 1));
}
.answer:not(:disabled):hover,.sess-ans:not(:disabled):hover,.trial-ans:not(:disabled):hover,.feed-ans:not(:disabled):hover {
  background: #f7faff;
  border-color: #8fabe4;
}
.answer.selected,.trial-ans.picked {
  background: #f0f5ff;
  box-shadow: inset 0 0 0 1px #7b9ce0;
  border-color: #7b9ce0;
}
.answer.selected::before,.trial-ans.picked .trial-k {
  color: #fff;
  background: var(--road);
}
.explanation,.sess-explain,.feed-explain {
  border: 1px solid #d8dfeb;
  border-radius: 11px;
  background: #f2f5f9;
  padding: 18px;
  font-size: calc(14px * var(--font-scale, 1));
  line-height: 1.9;
}
.explanation strong {
  color: #4c5d76;
  font-size: calc(13px * var(--font-scale, 1));
  margin-bottom: 5px;
}
.question-card>.row:last-child {
  padding-top: 20px;
  border-top: 1px solid var(--line);
  margin-top: 24px!important;
}
.question-card .tts-btn {
  border: 0;
  background: #f3f7fd;
  color: #546a94;
  border-radius: 9px;
  width: 36px;
  min-height: 36px;
}
.exam-bar {
  padding: 15px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 13px;
  margin-bottom: 18px;
  gap: 14px;
}
.timer {
  border: 0;
  background: #eef3fd;
  border-radius: 8px;
  color: #3a5ba8;
  font-size: calc(21px * var(--font-scale, 1));
  padding: 6px 12px;
}
.pill {
  border-radius: 4px;
  background: #e6ecf8;
  width: 20px;
  height: 20px;
}
.pill.current {
  background: var(--road);
  outline: none;
  box-shadow: 0 0 0 3px #dae4f8;
}
.pill.answered {
  background: #8aa8e2;
}
.exam-bar .btn-warn {
  background: #fbf0f1;
  color: #8f6064;
  border: 1px solid #f3dfe1;
  font-size: calc(11px * var(--font-scale, 1));
}
.subnav {
  border: 0;
}
.subnav button {
  border: 0;
  background: transparent;
  font-size: calc(14px * var(--font-scale, 1));
  min-height: 46px;
  color: #696d7a;
}
.subnav button.active {
  background: #e7edfc;
  color: #2a4fc0;
}
.study-header {
  grid-column: 1/-1;
  margin-bottom: 25px;
}
.study-header h1 {
  margin-bottom: 8px;
}
.study-header p {
  font-size: calc(14px * var(--font-scale, 1));
  color: var(--ink-soft);
}
.study-sidebar-label {
  font-size: calc(11px * var(--font-scale, 1));
  letter-spacing: .03em;
  margin-bottom: 9px;
  color: #696c76;
  padding-inline: 12px;
}
.sess-hero {
  padding: 24px 0;
}
.sess-title {
  font-size: calc(34px * var(--font-scale, 1));
}
.sess-intro {
  border-top: 4px solid var(--road);
}
.mix-ico {
  background: #eaedfb;
  color: #606c9b;
}
.mix-row {
  padding-block: 18px;
}
.sess-size-n {
  font-weight: 600;
  color: var(--road);
  font-size: calc(66px * var(--font-scale, 1));
}
.sess-why {
  background: #eef3fc;
  color: #44608f;
}
.sess-pips .pip {
  height: 5px;
}
.sess-pips .pip.done {
  background: #6b8ed6;
}
.sess-pips .pip.now {
  background: var(--road);
}
.focus-mode .card,.focus-mode .answer,.focus-mode .sess-ans,.focus-mode .trial-ans {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}
.focus-mode .product-topbar {
  display: none;
}
.focus-mode .explanation {
  background: var(--surface-soft);
  color: var(--ink);
}
.trial-bar {
  gap: 14px;
  font-size: calc(12px * var(--font-scale, 1));
}
.trial-track {
  height: 4px;
  margin-bottom: 20px;
}
.trial-free {
  margin-inline-start: auto;
  font-size: calc(11px * var(--font-scale, 1));
  color: #646d91;
}
.res-hero .section-title {
  font-size: calc(32px * var(--font-scale, 1));
}
.res-project {
  border-color: #d9e2f4;
  background: #f9fbff;
}
.modal {
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 25px 100px #16233b26;
}
.modal:has(#authForm) {
  border-top: 0;
}
.modal:has(#authForm)::before {
  content: 'תאוריה.IL';
  font-size: calc(17px * var(--font-scale, 1));
  font-weight: 700;
  color: var(--road);
  border: 0;
  padding-bottom: 0;
  margin-bottom: 20px;
}
.modal h2 {
  font-size: calc(28px * var(--font-scale, 1));
}
.modal-backdrop {
  background: #16233b80;
  backdrop-filter: blur(5px);
}
.modal .field {
  gap: 5px;
}
.field label {
  font-size: calc(13px * var(--font-scale, 1));
  color: #686d7e;
}
.field input,.field select {
  border-color: #e0e3ef;
  border-radius: 8px;
  min-height: 46px;
}
.toggle-row {
  padding: 20px 0;
}
.toggle-row strong {
  font-size: calc(14px * var(--font-scale, 1));
  font-weight: 600;
}
.toggle-row .hint {
  font-size: calc(11px * var(--font-scale, 1));
}
.switch input:checked {
  background: var(--road);
}
.stats-row .stat-card {
  border-top: 0;
  background: var(--card);
  padding: 22px;
  border-radius: 13px;
  text-align: start!important;
}
.stats-row .stat-num {
  justify-content: start;
  font-size: calc(40px * var(--font-scale, 1));
  color: var(--ink);
}
.stat-card .stat-label {
  font-size: calc(12px * var(--font-scale, 1));
}
.a11y-fab {
  background: var(--road);
  z-index: 200;
}
.focus-mode {
  --road: #8fb0ff;
  --road-deep: #a6c1ff;
  --paper: #0d1322;
  --card: #18223a;
  --ink: #eef2fb;
  --ink-soft: #a3b0cc;
  --line: #33415e;
  --surface-soft: #1e2a45;
}
.high-contrast {
  --ink: #000;
  --ink-soft: #222;
  --paper: #fff;
  --card: #fff;
  --line: #000;
  --road: #0f2a6b;
  --surface-soft: #eee;
}
.high-contrast .way,.high-contrast .metrics-strip {
  border-color: #000;
}
.readable-spacing .today-card {
  min-height: 360px;
}
.readable-spacing .metrics-strip {
  padding-block: 28px;
}
@media(min-width:1100px) {
  body[data-screen=study]:not(.focus-mode) #view {
    grid-template-columns: 180px minmax(0,1fr);
    column-gap: 25px;
  }
  body[data-screen=study] .subnav {
    position: sticky;
    top: 24px;
  }
  body[data-screen=study] .subnav button {
    padding: 13px 12px;
    border-radius: 8px;
  }
  body[data-screen=study] #studyArea>.row:first-child {
    font-size: calc(12px * var(--font-scale, 1));
    margin-bottom: 16px;
    color: #686c7b;
  }
  body[data-screen=settings] #view>.grid {
    grid-template-columns: 1fr 1fr;
  }
  .is-member[data-screen=exam] #view>.grid-2 {
    grid-template-columns: 1.45fr 1fr;
  }
  .is-member[data-screen=exam] #view>.grid-2>.card:first-child {
    background: #e8eefb;
    border-color: #dbe4f8;
  }
}
@media(max-width:1250px) and (min-width:1100px) {
  .is-member #view {
    padding-inline: 28px;
  }
  .workspace-grid {
    grid-template-columns: minmax(0,1fr) 245px;
    gap: 19px;
  }
  .today-card {
    padding: 24px;
  }
  .daily-art {
    width: 125px;
  }
  .daily-stack {
    left: 0;
  }
  .daily-stack.back {
    left: -15px;
  }
  .daily-spark {
    left: 108px;
  }
  .today-h {
    font-size: calc(29px * var(--font-scale, 1));
  }
  .metrics-strip>div {
    gap: 8px;
    padding-inline: 8px;
  }
  .metric-icon {
    width: 35px;
    height: 35px;
  }
  .metrics-strip b {
    font-size: calc(24px * var(--font-scale, 1));
  }
  .topic-track {
    width: 75px;
  }
  .topic-empty {
    flex-wrap: wrap;
  }
}
@media(max-width:1099px) {
  .is-member .product-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 24px;
    font-size: calc(12px * var(--font-scale, 1));
    background: white;
    border-bottom: 1px solid var(--line);
  }
  .product-divider {
    padding-inline: 10px;
  }
  .product-wordmark {
    font-weight: 600;
  }
  .is-member .nav a {
    gap: 7px;
  }
  .is-member .nav svg {
    width: 17px;
    height: 17px;
  }
  .is-member .topbar-inner {
    padding-block: 17px;
    gap: 15px;
  }
  .is-member .nav {
    gap: 2px;
  }
  .is-member #view {
    padding-inline: 24px;
  }
  .workspace-grid {
    grid-template-columns: minmax(0,1fr) 275px;
    gap: 20px;
  }
  .daily-art {
    width: 140px;
  }
  .today-h {
    font-size: calc(31px * var(--font-scale, 1));
  }
}
@media(max-width:760px) {
  .is-member {
    padding-bottom: 83px;
  }
  .is-member .topbar {
    position: fixed;
    top: auto;
    bottom: 0;
    inset-inline: 0;
    width: 100%;
    z-index: 80;
    border: 0;
    border-top: 1px solid var(--line);
    background: var(--card);
  }
  .is-member .topbar-inner {
    min-height: 0;
    padding: 8px 10px 10px;
    display: block;
  }
  .is-member .topbar .logo,.is-member .member-profile {
    display: none;
  }
  .is-member .nav {
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 3px;
    scrollbar-width: none;
    padding: 0;
  }
  .is-member .nav a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    min-width: 70px;
    padding: 7px 9px;
    font-size: calc(10px * var(--font-scale, 1));
    border-radius: 9px;
    min-height: 54px;
  }
  .is-member .nav a.active {
    background: #eaedfb;
    box-shadow: none;
  }
  .is-member .nav a svg {
    width: 19px;
    height: 19px;
  }
  .is-member .nav>button {
    margin: 6px;
    align-self: center;
    flex-shrink: 0;
  }
  .is-member #navLogout {
    font-size: calc(11px * var(--font-scale, 1));
  }
  .is-member .product-topbar {
    padding: 16px 20px;
    min-height: 60px;
  }
  .product-wordmark {
    font-size: calc(15px * var(--font-scale, 1));
    color: var(--road);
  }
  .product-topbar a {
    font-size: calc(11px * var(--font-scale, 1));
  }
  .is-member #view {
    padding: 25px 18px 40px;
  }
  .workspace-head {
    flex-direction: row;
    align-items: start;
    gap: 13px;
    margin-bottom: 22px;
  }
  .workspace-head h1 {
    font-size: calc(25px * var(--font-scale, 1));
    line-height: 1.2;
  }
  .workspace-head p {
    font-size: calc(12px * var(--font-scale, 1));
  }
  .workspace-head .btn {
    font-size: 0;
    padding: 10px;
    min-width: 39px;
    min-height: 39px;
  }
  .workspace-head .btn svg {
    width: 19px;
  }
  .workspace-head .eyebrow {
    font-size: calc(10px * var(--font-scale, 1));
    margin-bottom: 6px;
  }
  .metrics-strip {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px 0;
    padding: 19px 7px;
    margin-bottom: 20px;
  }
  .metrics-strip>div {
    justify-content: start;
    padding-inline: 15px;
    gap: 11px;
  }
  .metrics-strip>div:nth-child(3) {
    border-inline-start: 0;
  }
  .metrics-strip small {
    font-size: calc(10px * var(--font-scale, 1));
  }
  .metrics-strip b {
    font-size: calc(24px * var(--font-scale, 1));
  }
  .metric-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .metric-icon svg {
    width: 19px;
  }
  .workspace-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .today-card {
    padding: 24px 23px;
    min-height: 265px;
  }
  .today-in {
    max-width: 65%;
  }
  .today-h {
    font-size: calc(31px * var(--font-scale, 1));
  }
  .today-sub {
    font-size: calc(12px * var(--font-scale, 1));
    max-width: 28ch;
  }
  .daily-art {
    width: 105px;
    margin-inline-end: -15px;
  }
  .daily-stack {
    width: 108px;
    height: 149px;
    left: -6px;
    top: 48px;
  }
  .daily-stack.front {
    padding: 17px 13px;
  }
  .daily-stack b {
    font-size: calc(21px * var(--font-scale, 1));
  }
  .daily-stack.back {
    left: -17px;
    top: 60px;
  }
  .daily-spark {
    left: 85px;
    top: 21px;
  }
  .today-lbl {
    font-size: calc(9px * var(--font-scale, 1));
    padding: 4px 6px;
  }
  .today-go {
    font-size: calc(12px * var(--font-scale, 1));
    padding: 11px 15px;
    gap: 12px;
  }
  .section-bar {
    margin: 25px 0 14px;
  }
  .section-bar h2 {
    font-size: calc(17px * var(--font-scale, 1));
  }
  .section-bar>span {
    font-size: calc(10px * var(--font-scale, 1));
  }
  .ways-grid {
    gap: 10px;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .way {
    padding: 18px 16px;
    min-height: 155px;
  }
  .way b {
    font-size: calc(15px * var(--font-scale, 1));
  }
  .way>span:not(.way-icon) {
    font-size: calc(11px * var(--font-scale, 1));
    line-height: 1.6;
  }
  .way>i {
    inset-inline-end: 15px;
    top: 23px;
  }
  .way>i svg {
    width: 15px;
  }
  .topic-empty {
    padding: 19px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .topic-empty>svg {
    width: 25px;
  }
  .topic-empty>div {
    min-width: 190px;
  }
  .topic-line {
    padding-inline: 12px;
    gap: 10px;
  }
  .topic-line>span {
    min-width: 0;
    font-size: calc(11px * var(--font-scale, 1));
  }
  .topic-track {
    width: 70px;
  }
  .workspace-aside {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .readiness {
    padding: 24px;
  }
  .readiness-gauge {
    width: 145px;
    height: 145px;
    margin: 20px auto;
  }
  .readiness-gauge>div {
    width: 128px;
    height: 128px;
  }
  .focus-prompt {
    padding: 23px;
  }
  .focus-prompt h3 br {
    display: none;
  }
  .focus-prompt-icon {
    float: left;
  }
  .focus-prompt a {
    max-width: 260px;
  }
  .small-note {
    padding: 4px 8px;
  }
  .question-card,.sess-card,.trial-card,.feed-card {
    padding: 23px 19px;
    border-radius: 15px;
  }
  .question-card h3,.sess-q,.trial-q,.feed-q {
    font-size: calc(23px * var(--font-scale, 1));
    line-height: 1.6;
    max-width: none;
  }
  .answer,.sess-ans,.trial-ans,.feed-ans {
    font-size: calc(15px * var(--font-scale, 1));
    min-height: 66px;
    padding: 13px;
  }
  .exam-bar {
    padding: 12px;
    gap: 10px;
  }
  .study-header h1 {
    font-size: calc(29px * var(--font-scale, 1));
  }
  .study-header p {
    font-size: calc(12px * var(--font-scale, 1));
  }
  .study-sidebar-label {
    display: none;
  }
  .subnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 13px;
  }
  .subnav button {
    white-space: nowrap;
    min-height: 39px;
    font-size: calc(12px * var(--font-scale, 1));
    padding: 9px 13px;
    background: #fff;
    border: 1px solid var(--line);
  }
  .subnav button.active {
    border-color: #c7d0f0;
  }
  .section-title {
    font-size: calc(28px * var(--font-scale, 1));
  }
  .stats-row .stat-card {
    padding: 17px 12px;
  }
  .stats-row .stat-num {
    font-size: calc(27px * var(--font-scale, 1));
  }
  .stats-row .stat-label {
    font-size: calc(11px * var(--font-scale, 1));
  }
  .focus-mode {
    padding-bottom: 0;
  }
  .focus-mode #view {
    padding-top: 75px;
  }
  .focus-mode .topbar {
    display: none;
  }
  .is-member .a11y-fab,.is-member .feedback-fab,.is-member .help-fab {
    bottom: 91px;
  }
  .is-member .a11y-panel {
    bottom: 145px;
  }
  .is-member #toastRoot {
    bottom: 94px;
  }
  .trial-bar {
    gap: 10px;
  }
  .trial-free {
    font-size: calc(10px * var(--font-scale, 1));
  }
  .trial-count {
    font-size: calc(12px * var(--font-scale, 1));
  }
  .trial-x,.trial-tts {
    width: 35px;
    min-height: 35px;
  }
  .is-member footer {
    padding-bottom: 30px;
  }
}
@media(max-width:380px) {
  .is-member #view {
    padding-inline: 14px;
  }
  .today-card {
    padding-inline: 19px;
  }
  .today-h {
    font-size: calc(27px * var(--font-scale, 1));
  }
  .daily-art {
    width: 85px;
  }
  .daily-stack {
    width: 97px;
  }
  .today-sub {
    max-width: 25ch;
  }
  .metric-icon {
    width: 30px;
    height: 30px;
  }
  .metrics-strip>div {
    padding-inline: 9px;
  }
  .metrics-strip em {
    font-size: calc(9px * var(--font-scale, 1));
  }
  .section-bar>span {
    display: none;
  }
  .workspace-head h1 {
    font-size: calc(23px * var(--font-scale, 1));
  }
}
@media(prefers-reduced-motion:reduce) {
  .way:hover {
    transform: none;
  }
}
body.reduced-motion .way:hover {
  transform: none;
}
.exam-intro-head {
  margin-bottom: 30px;
}
.exam-intro-head .section-title {
  margin-bottom: 12px;
}
.exam-intro-head p {
  color: var(--ink-soft);
  font-size: calc(14px * var(--font-scale, 1));
}
.exam-choice-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 22px;
}
.exam-choice {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: start;
}
.exam-choice.full {
  background: #eef3fd;
  border-color: #dce5f6;
}
.choice-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 25px;
}
.choice-icon {
  display: grid;
  place-items: center;
  width: 47px;
  height: 47px;
  border-radius: 13px;
  background: #dae3f7;
  color: #5c7fd0;
}
.choice-tag {
  font-size: calc(10px * var(--font-scale, 1));
  border: 1px solid #d3dff3;
  color: #656c81;
  padding: 5px 10px;
  border-radius: 30px;
}
.exam-choice h2 {
  font-size: calc(29px * var(--font-scale, 1));
  line-height: 1.2;
  margin-bottom: 14px;
}
.exam-choice>p {
  font-size: calc(14px * var(--font-scale, 1));
  line-height: 1.8;
  color: #686d7e;
  max-width: 37ch;
}
.exam-facts {
  display: flex;
  width: 100%;
  margin: 28px 0 30px;
}
.exam-facts>span {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: start;
  gap: 5px;
  padding-inline-start: 20px;
  border-inline-start: 1px solid #d3dff3;
}
.exam-facts>span:first-child {
  padding: 0;
  border: 0;
}
.exam-facts b {
  font-size: calc(34px * var(--font-scale, 1));
  font-weight: 600;
  color: #3d5f9e;
  line-height: 1.1;
}
.exam-facts small {
  font-size: calc(11px * var(--font-scale, 1));
  color: #676d7e;
}
.exam-choice .btn {
  width: 100%;
  justify-content: space-between;
  margin-top: auto;
  font-size: calc(14px * var(--font-scale, 1));
}
.choice-license {
  font-size: calc(10px * var(--font-scale, 1));
  color: #666c7f;
  margin-top: 16px;
}
.choice-license a {
  color: #626e90;
}
.quick .choice-icon {
  background: #fff0e5;
  color: #caa87f;
}
.quick .choice-tag {
  background: #fcf9f5;
  border-color: #f2e7d9;
  color: #766a5b;
}
.quick-art {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: auto;
  padding: 22px 0;
  color: #ead5bd;
}
.quick-art>span {
  font-size: calc(76px * var(--font-scale, 1));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -3px;
}
.quick-art>svg {
  width: 48px;
}
.exam-intro-note {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 25px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--card);
  color: #676d7e;
}
.exam-intro-note b {
  font-size: calc(13px * var(--font-scale, 1));
  color: #676d7e;
}
.exam-intro-note p {
  font-size: calc(12px * var(--font-scale, 1));
  margin-top: 4px;
  color: #686d7c;
}
.exam-intro-note a {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-inline-start: auto;
  font-size: calc(12px * var(--font-scale, 1));
  text-decoration: none;
  color: #646d8a;
}
@media(max-width:700px) {
  .exam-choice-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .exam-choice {
    padding: 26px;
  }
  .exam-choice h2 {
    font-size: calc(27px * var(--font-scale, 1));
  }
  .exam-choice>p {
    font-size: calc(13px * var(--font-scale, 1));
  }
  .choice-top {
    margin-bottom: 22px;
  }
  .exam-facts {
    margin-block: 25px;
  }
  .exam-facts b {
    font-size: calc(31px * var(--font-scale, 1));
  }
  .exam-intro-note {
    flex-wrap: wrap;
    padding: 19px;
    gap: 12px;
  }
  .exam-intro-note a {
    margin-inline-start: 0;
  }
  .exam-intro-head .section-title {
    font-size: calc(28px * var(--font-scale, 1));
  }
  .exam-intro-head p {
    font-size: calc(13px * var(--font-scale, 1));
    line-height: 1.8;
  }
  .exam-choice.quick {
    min-height: 330px;
  }
}
#statsRoot .stats-section-title {
  font-size: calc(19px * var(--font-scale, 1));
  margin: 30px 0 16px;
  letter-spacing: 0;
}
#statsRoot .card.stack>div {
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
}
#statsRoot .card.stack>div:last-child {
  border: 0;
}
#statsRoot .card.stack .row {
  margin-bottom: 13px;
  font-size: calc(13px * var(--font-scale, 1));
}
#statsRoot .bar {
  height: 6px;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  font-size: calc(11px * var(--font-scale, 1));
  border-radius: 5px;
  background: var(--surface-soft);
  color: var(--road);
}
.tag.paid {
  background: var(--good-bg);
  color: var(--go);
}
.tag.failed {
  background: var(--bad-bg);
  color: var(--stop);
}
/* Keep learning focus and contrast preferences authoritative. */
body.focus-mode{--road:#8fb0ff;--road-deep:#c9d2f6;--paper:#0d1322;--card:#18223a;--ink:#eef2fb;--ink-soft:#a3b0cc;--line:#33415e;--surface-soft:#1e2a45;--good-bg:#273145;--bad-bg:#4b2935;--go:#aabcd5;--stop:#ffb4bf}
body.focus-mode .question-card h3,body.focus-mode .sess-q{color:var(--ink)}body.focus-mode .q-cat,body.focus-mode .question-card .row>.q-cat{color:var(--ink-soft);background:var(--surface-soft)}body.focus-mode .answer::before{background:var(--surface-soft);color:var(--ink-soft)}body.focus-mode .subnav button.active{background:var(--surface-soft);color:var(--ink)}body.focus-mode .tts-btn{background:var(--surface-soft);color:var(--ink)}body.focus-mode .explanation,body.focus-mode .explanation strong{color:var(--ink)}body.focus-mode .exam-bar{background:var(--card)}body.focus-mode .answer.selected{background:var(--surface-soft);border-color:var(--road)}body.focus-mode .btn-ghost{background:var(--card);color:var(--ink)}body.high-contrast .product-landing p,body.high-contrast .product-landing h1,body.high-contrast .product-landing h2,body.high-contrast .product-landing h3,body.high-contrast .product-landing h4{color:#000!important}body.high-contrast .today-card{background:#eee;color:#000;border-color:#000}body.high-contrast .today-h,body.high-contrast .today-sub,body.high-contrast .metrics-strip small,body.high-contrast .way>span,body.high-contrast .readiness p,body.high-contrast .focus-prompt p{color:#000}body.high-contrast .today-go{background:#0f2a6b;color:white}

/* תמונות השאלה במובייל. בלי תקרת גובה תמונה אחת דוחפת
   את התשובות אל מתחת לקפל. */
@media (max-width: 760px) {
  .q-img-wrap, .sess-img, .trial-img, .feed-img {
    margin: 14px auto;
    max-width: 100%;
  }
  .q-img-wrap img, .sess-img img, .trial-img img, .feed-img img {
    max-height: 190px;
    width: auto;
  }
}

/* מחלקות שה-JS של תפריט הנגישות, העזרה וחלון ההצלחה
   יוצר. הן נמחקו בעיצוב מחדש, והרכיבים נוצרו בלי סגנון. */
.a11y-fval { min-width: 56px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.a11y-icon {
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  display: grid; place-items: center; font-size: 16px; font-weight: 700;
  background: var(--card); border: 1px solid var(--line);
}
.a11y-icon { background: var(--road); color: #fff; border-color: var(--road); }
.a11y-label { font-size: .82em; font-weight: 700; color: var(--ink-soft); margin-bottom: 8px; letter-spacing: .02em; }
.help-modal { max-width: 520px; position: relative; }
.success-modal { text-align: center; max-width: 460px; }
.success-burst { font-size: 4rem; animation: burst .6s var(--ease-glass, ease) both; }
.success-burst { animation: none; }

/* ============================================================
   רכיבים שה-JS יוצר וה-CSS שלהם נמחק בעיצוב מחדש.
   בלי הכללים האלה הרכיבים נוצרים ב-DOM בלי עיצוב:
   כפתור העזרה, ספינר הטעינה, הטבלאות וסרגל העדכון.
   ============================================================ */
/* .done-cat */
.done-cat {font-weight:700;flex:1;min-width:100px}
/* .done-now */
.done-now {font-weight:700;font-variant-numeric:tabular-nums}
/* .fb-fab */
/* ================= כפתור פידבק צף ================= */
.fb-fab {
  position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: 200;
  background: var(--ink); color: #fff; border: 1px solid rgba(255,255,255,.15);
  padding: 11px 18px; border-radius: 99px; font-weight: 700; font-size: .92em; cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(15,23,42,.4); backdrop-filter: blur(8px);
  transition: transform .2s var(--ease-glass), box-shadow .2s;
}
.fb-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -8px rgba(27,95,217,.5); background: var(--road-deep); }
/* מוסתר במצב פוקוס ובהדפסה */
body.focus-mode .fb-fab { display: none; }
body.feed-mode .topbar,
body.feed-mode footer,
body.feed-mode .fb-fab { display: none !important; }
/* כפתור העזרה מוזז כדי לא להסתיר את כפתור הנגישות */
  .fb-fab { inset-inline-end: 14px; }
/* .fx-in */
.fx-in-up {animation:fx-in-up .26s cubic-bezier(.22,.9,.3,1)}
.fx-in {opacity:1}
/* .fx-in-up */
.fx-in-up {animation:fx-in-up .26s cubic-bezier(.22,.9,.3,1)}
/* .fx-out */
/* ── מעבר בין שאלות ── */
.fx-out {opacity:0;transform:translateY(-9px);transition:opacity .13s ease,transform .13s ease}
/* .fx-stagger */
/* ── חשיפה מדורגת ── */
.fx-stagger {animation:fx-rise .38s cubic-bezier(.22,.9,.3,1) var(--delay) both}
/* .low */
.timer.low { border-color: var(--stop); color: var(--stop); }
body.reduced-motion .timer.low { animation: none; }
/* .mix-list */
.mix-list {display:grid;gap:11px;margin-bottom:22px}
/* .notif-out */
.notif-out { opacity: 0; height: 0 !important; padding-top: 0; padding-bottom: 0; overflow: hidden; }
/* .opt */
.survey-block .opt { font-size: .82em; font-weight: 400; }
/* .res-q-top */
.res-q-top {display:flex;gap:11px;align-items:flex-start;font-size:.96em}
/* .spinner */
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--road);
  animation: spin .8s linear infinite; display: inline-block;
}
body.reduced-motion .spinner { animation: none; border-top-color: var(--line); }
/* .tbl */
table.tbl { width: 100%; border-collapse: collapse; font-size: .93em; }
.tbl th, .tbl td { padding: 9px 10px; text-align: start; border-bottom: 1px solid var(--line); }
.tbl th { color: var(--ink-soft); font-size: .88em; }
/* טבלאות נקיות */
table.tbl tr:hover td { background: rgba(27,95,217,.035); }
/* טבלאות פנימיות, שורות מרחפות */
.tbl tbody tr { transition: background .15s; }
.tbl tbody tr:hover td { background: rgba(27,95,217,.04); }
/* ============================================================
   ספרות טבלאיות: מספרים מיושרים ונוחים להשוואה
   ============================================================ */
.stat-num, .timer, .tbl td, .price, .notif-dot,
.bar + *, .road-progress + * {
  font-variant-numeric: tabular-nums;
}
/* ---------- טבלאות ---------- */
.tbl-wrap { overflow-x: auto; margin: 0 -18px -18px; padding: 0 0 2px; }
.tbl td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--c-line);
  vertical-align: middle;
}
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover { background: var(--c-raise); }
.tbl tbody tr:last-child td { border-bottom: 0; }
/* מספרים בטבלאות מיושרים לספרה */
.tbl td:has(> .mono), .tbl .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.tbl-wrap { margin: 0 -18px -18px; }
/* --- כותרות טבלה דביקות בגלילה ארוכה --- */
.tbl-wrap { max-height: none; }
.tbl thead th { position: sticky; top: 0; z-index: 2; }
/* --- מספרים: יישור לספרה בכל מקום רלוונטי --- */
.stat-num, .tbl td, .tag { font-variant-numeric: tabular-nums; }
.card:has(.tbl) { padding-bottom: 0; }
/* --- ריחוף עדין על שורות פעולה --- */
.tbl tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--c-signal); }
/* --- קבוצת כפתורים בטבלה: קומפקטית ולא נשברת --- */
.tbl .row { gap: 6px; flex-wrap: nowrap; }
/* .tbl-wrap */
/* ---------- טבלאות ---------- */
.tbl-wrap { overflow-x: auto; margin: 0 -18px -18px; padding: 0 0 2px; }
.tbl-wrap { margin: 0 -18px -18px; }
/* --- כותרות טבלה דביקות בגלילה ארוכה --- */
.tbl-wrap { max-height: none; }
/* .update-bar */
/* ============================================================
   פס עדכון גרסה
   מופיע כשיצאה גרסה חדשה, כדי שאף אחד לא יצטרך לדעת
   מה זה מטמון או איך מנקים אותו.
   ============================================================ */
.update-bar {
  position: fixed; z-index: 98;
  bottom: 18px; inset-inline-end: 18px;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px 11px 16px;
  background: var(--road-deep); color: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 30px -10px rgba(21,35,59,.45);
  font-size: .92em;
  animation: update-in .24s cubic-bezier(.2,.9,.3,1);
  max-width: calc(100vw - 36px);
}
/* לא מסתיר את כפתור הנגישות ואת כפתור העזרה */
  .update-bar { inset-inline: 12px; bottom: 74px; justify-content: space-between; }
body.reduced-motion .update-bar { animation: none; }
@keyframes fx-in-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fx-rise{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes update-in { from { opacity: 0; transform: translateY(12px); } }

/* ============================================================
   התראות הלומד.
   קודם הוצגו כאן שלושה באנרים זה מתחת לזה, עם אמוג'י, שדחקו
   את כרטיס המפגש והמדדים אל מתחת לקפל. עכשיו ההתראה הראשונה
   מוצגת במלואה והשאר מתקפלות מאחורי שורה אחת.
   ============================================================ */
.notif-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
  margin-bottom: 18px;
}
.notif-card .notif-list > .notif + .notif { border-top: 1px solid var(--line); }

.notif {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.notif-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--surface-soft);
  color: var(--road);
}
/* הגוון אומר במבט אחד במה לטפל קודם */
.notif--warn .notif-icon  { background: #fff4e0; color: #9b6a28; }
.notif--promo .notif-icon { background: #fff7e2; color: #8a6414; }
.notif--focus .notif-icon { background: var(--surface-soft); color: var(--road); }

.notif-body { min-width: 0; }
.notif-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  margin-bottom: 2px;
}
.notif-text {
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.5;
}
.notif-action {
  white-space: nowrap;
  font-weight: 600;
  font-size: 14px;
  color: var(--road);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
}
.notif-action:hover { background: var(--surface-soft); }
.notif-close {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 7px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  /* שטח נגיעה מלא, גם כשהאייקון קטן */
  min-width: 38px;
  min-height: 38px;
}
.notif-close:hover { background: var(--surface-soft); color: var(--ink); }

.notif-more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  list-style: none;
  min-height: 44px;
}
.notif-more > summary::-webkit-details-marker { display: none; }
.notif-more > summary:hover { background: var(--surface-soft); }
.notif-more[open] > summary svg { transform: rotate(180deg); }
.notif-more > summary svg { transition: transform .18s ease; }

/* במובייל הכפתור יורד לשורה משלו, אחרת הכותרת נמעכת */
@media (max-width: 620px) {
  .notif {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding: 13px 13px;
  }
  .notif-action {
    grid-column: 1 / -1;
    text-align: center;
    padding: 10px;
    min-height: 44px;
    display: grid;
    place-items: center;
  }
  .notif-title { font-size: 14.5px; }
  .notif-text { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .notif-more > summary svg { transition: none; }
}

/* ============================================================
   הפעמון בסרגל הצדדי.
   הוא היה ריבוע 40 על 40 בלי תווית, תקוע בין פריטים שכולם
   שורות עם טקסט. התוצאה נראתה כמו שגיאת רינדור, ולא היה ברור
   מה הכפתור עושה. עכשיו הוא שורה מלאה כמו שאר הפריטים,
   והמונה מציג מספר ולא נקודה.
   ============================================================ */
.nav-bell {
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
  height: auto;
  min-height: 44px;
  margin: 2px 10px;
  padding: 10px 12px;
  border: 0;
  background: none;
  border-radius: 10px;
  color: inherit;
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
  position: relative;
  text-align: start;
}
.nav-bell:hover { background: var(--surface-soft); }
.nav-bell[aria-expanded="true"] { background: var(--surface-soft); color: var(--road); }
.nav-bell-label { flex: 1; }

/* מספר ולא נקודה: "3 התראות" פועל אחרת מ"יש משהו" */
.notif-dot {
  position: static;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--road);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}

/* חלון ההתראות: היה נחתך ולא נראה כמו שצריך */
.notif-panel {
  z-index: 210;              /* מעל באנר העוגיות, כמו הכפתורים הצפים */
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 18px 44px -18px rgba(21, 35, 59, .32);
  overflow: hidden auto;
  overscroll-behavior: contain;
}
.notif-panel .notif + .notif { border-top: 1px solid var(--line); }
.notif-empty {
  padding: 26px 16px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
}

/* במובייל החלון עולה מלמטה על כל הרוחב, במקום להיצמד
   לפעמון ולהיחתך בקצה המסך */
@media (max-width: 620px) {
  .notif-panel {
    position: fixed;
    inset: auto 0 0 0;
    top: auto;
    width: 100%;
    max-height: 78dvh;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

/* ============================================================
   התראות במובייל, שני תיקונים מבדיקה בדפדפן.
   ============================================================ */
@media (max-width: 620px) {
  /* 1. כפתור הסגירה תפס שורה שלמה מתחת לכפתור הפעולה, כי
     כפתור הפעולה נפרס על כל הרוחב ודחף אותו לשורה הבאה.
     מעבירים אותו לפינה העליונה כשכבה, מחוץ לזרימת הרשת. */
  .notif { position: relative; padding-top: 16px; }
  .notif-close {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-start: 6px;
    min-width: 34px;
    min-height: 34px;
    padding: 5px;
  }
  .notif-body { padding-inline-start: 26px; }

  /* 2. הפעמון לא היה נגיש במובייל: הוא יושב בסרגל שהופך
     לעמודה רק מ-1100 ומעלה. בלעדיו אין דרך להגיע להתראות
     ישנות אחרי שסוגרים את הכרטיס. */
  .nav-bell {
    display: inline-flex;
    margin: 0 4px;
    padding: 8px 10px;
    min-height: 40px;
  }
  .nav-bell-label {
    /* התווית מיותרת בסרגל צר, האייקון מוכר. נשארת לקורא מסך. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* הסרגל העליון במובייל.
   הפריטים לא נכנסו ב-375, והאחרון שבהם, הפעמון, נדחף אל מחוץ
   למסך (נמדד ב-x=-149). הוא היה קיים ב-DOM ובלתי נגיש לחלוטין.
   גלילה אופקית בתוך הסרגל עדיפה על הסתרה: שום פריט לא נעלם. */
@media (max-width: 620px) {
  .nav {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav > * { flex: 0 0 auto; }
  /* הפעמון ראשון, כדי שהתראות יהיו תמיד נראות בלי לגלול.
     התראה שצריך לחפש אותה היא התראה שלא נקראת. */
  .nav-bell { order: -1; margin-inline-end: 4px; }
}

/* ============================================================
   שלב 3: תיקוני מובייל ופוטר, כולם מתוך מדידה בדפדפן.
   ============================================================ */

/* הפוטר: האייקונים היו flex בלי יישור, ולכן נצמדו לקצה
   במקום לשבת במרכז מתחת לקישורים. */
.footer-social {
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.footer-social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.footer-social a:hover { background: var(--surface-soft); color: var(--road); }
.footer-links { justify-content: center; }

@media (max-width: 620px) {
  /* קישורי הפוטר נמדדו בגובה 20px. קשה לפגוע, ובפרט
     בקישורים משפטיים שהמשתמש חייב להגיע אליהם. */
  .footer-links a {
    padding: 11px 4px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* כפתורים: "שמירה" ו"עדכון סיסמה" נמדדו ב-37px,
     "יציאה" ב-38. מתחת לסף המומלץ לאצבע. */
  .btn, button.btn, .btn-sm {
    min-height: 44px;
    padding-block: 11px;
  }

  /* תיבות סימון ומתגים: נמדדו ב-16 ו-28 פיקסל. */
  input[type="checkbox"], input[type="radio"] {
    width: 22px;
    height: 22px;
  }
  .switch, .toggle { min-height: 30px; }
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], select, textarea {
    min-height: 46px;
    font-size: 16px;   /* מתחת ל-16 ספארי מזווג בפוקוס */
  }

  /* "החשבון שלי" בסרגל העליון נמדד בגובה 18px */
  .topbar a, .nav a { min-height: 40px; display: inline-flex; align-items: center; }
}

/* התגית בכרטיס המפגש נחתכה במובייל ("מותאם ללמידה שלך") */
.today-card .daily-badge,
.today-card [class*="badge"] {
  white-space: normal;
  overflow: visible;
  line-height: 1.35;
}

/* ============================================================
   מצב פוקוס: פריסה, לא רק צבעים.
   מה שהיה: המצב כיבה את פריסת הרשת של מסך הלימוד, ולכן רשימת
   הנושאים נמתחה על כל הרוחב כארבע שורות ענקיות, הכותרות
   השיווקיות נשארו, והשאלה נדחפה למטה עם חלל ריק מעליה.
   זה היה מצב פוקוס שמוסיף הסחות במקום להסיר אותן.

   מה שצריך: הנושאים נהיים שורת שבבים דקה, הכותרות יורדות,
   והשאלה עולה למרכז ברוחב קריא.
   ============================================================ */
body.focus-mode #view {
  max-width: 780px;
  margin-inline: auto;
  padding-top: 64px;
}

/* הכותרות השיווקיות אינן שייכות למצב שנועד לריכוז */
body.focus-mode .section-title,
body.focus-mode .eyebrow,
body.focus-mode .lead,
body.focus-mode .study-header p,
body.focus-mode .sess-intro > p {
  display: none;
}

/* רשימת הנושאים: משורות על כל הרוחב לשורת שבבים אחת */
body.focus-mode[data-screen] .subnav,
body.focus-mode .topic-list,
body.focus-mode .topics {
  display: flex;
  flex-direction: row;   /* היה column מהפריסה הרגילה, ולכן כל נושא תפס שורה */
  flex-wrap: wrap;
  overflow-x: visible;
  gap: 8px;
  margin-bottom: 20px;
}
body.focus-mode[data-screen] .subnav > *,
body.focus-mode .topic-list > *,
body.focus-mode .topics > * {
  flex: 0 0 auto;
  width: auto;
  padding: 9px 14px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 14px;
  border: 1px solid var(--line);
}

/* השאלה היא הדבר היחיד שאמור למשוך את העין */
body.focus-mode .question-card,
body.focus-mode .sess-card {
  margin-inline: auto;
  width: 100%;
}

/* כפתור היציאה: נמדד ב-37px, ועכשיו הוא גם ברור יותר */
body.focus-mode #focusExit {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
  z-index: 60;
}

@media (max-width: 620px) {
  body.focus-mode #view { padding-top: 58px; padding-inline: 14px; }
  body.focus-mode .subnav > *,
  body.focus-mode .topic-list > *,
  body.focus-mode .topics > * { font-size: 13px; padding: 8px 12px; }
}

/* שאריות מדידה במובייל: כל אלה נמדדו מתחת ל-44px */
@media (max-width: 620px) {
  /* "החשבון שלי" בסרגל העליון נמדד ב-18px */
  .topbar a, .topbar button,
  .product-topbar a, .product-topbar button,
  a[href="#account"], a[href="#settings"] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  /* שבבי הנושאים נמדדו ב-39 עד 40 */
  .subnav button { min-height: 44px; }
  /* כפתורים ללא תווית, כמו ההקראה */
  .btn:empty, button.btn:not(:has(*)):empty { min-height: 44px; min-width: 44px; }
  /* קישורים בתוך באנר העוגיות נמדדו ב-17px */
  .cookie-banner a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
}

/* התגית בכרטיס המפגש נחתכה בכל רוחב מתחת ל-1100 */
.today-card a, .today-card .pill, .today-card [class*="tag"] {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* מתגים ומחוונים בהגדרות: נמדדו ב-28 ו-16 פיקסל.
   שטח נגיעה קטן הוא בעיה כפולה כאן, כי דווקא במסך ההגדרות
   יושבות ההתאמות למי שמתקשה בדיוק מוטורי. */
@media (max-width: 620px) {
  input[type="checkbox"] {
    width: 24px;
    height: 24px;
    /* שטח הנגיעה גדול מהריבוע הנראה, בלי לשנות את המראה */
    outline-offset: 10px;
  }
  input[type="checkbox"]::before {
    content: "";
    position: absolute;
    inset: -11px;
  }
  label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    position: relative;
  }
  input[type="range"] {
    height: 34px;
    padding-block: 9px;
  }
  input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; }
  input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; }
}

/* ============================================================
   הצעת התקנה כאפליקציה. מובייל בלבד.
   ============================================================ */
.pwa-bar {
  position: fixed;
  inset-inline: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 190;                    /* מתחת לכפתורי הנגישות והעזרה (200) */
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 16px 40px -16px rgba(21, 35, 59, .34);
}
.pwa-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--surface-soft);
  color: var(--road);
}
.pwa-text { min-width: 0; flex: 1; line-height: 1.4; }
.pwa-text strong { display: block; font-size: 14.5px; }
.pwa-text span { font-size: 12.5px; color: var(--ink-soft); }
.pwa-bar .btn { flex-shrink: 0; min-height: 42px; }
.pwa-x {
  flex-shrink: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-soft);
  display: grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  border-radius: 9px;
}
.pwa-x:hover { background: var(--surface-soft); }

/* מעל 820 ההצעה לא רלוונטית, וגם ה-JS לא מציג אותה */
@media (min-width: 821px) { .pwa-bar { display: none; } }

/* כשהאתר כבר רץ כאפליקציה, נותנים לו להיראות כמו אחת:
   מרווח בטוח לחריץ ולסרגל הבית, ובלי הצעת התקנה. */
@media (display-mode: standalone) {
  .pwa-bar { display: none; }
  body { padding-top: env(safe-area-inset-top, 0px); }
  .topbar, .nav { padding-top: env(safe-area-inset-top, 0px); }
  .cookie-banner { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   מצב פיד: מחוות ורמז.
   ההחלקה נלמדת רק אם רואים שהיא קיימת, ולכן הכרטיס זז עם
   האצבע ויש שורת הכוונה קבועה. לכל מחווה יש מקש מקביל.
   ============================================================ */
.feed-card {
  transition: transform .18s cubic-bezier(.22,.61,.36,1);
  touch-action: pan-y;
  will-change: transform;
}
.feed-hint {
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 14px auto 0;
  max-width: 320px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
}
/* רמז המקלדת מיותר במגע, אבל נשאר לקורא מסך */
.feed-hint-keys { display: none; }
@media (hover: hover) and (pointer: fine) {
  .feed-hint-keys { display: inline; }
}

/* כרטיס הפיד בדשבורד: מוסתר במחשב, כי המסך עצמו חסום שם */
@media (min-width: 821px) {
  .way--mobile { display: none; }
}

/* מי שביקש פחות תנועה מקבל מעבר מיידי ובלי גרירה */
@media (prefers-reduced-motion: reduce) {
  .feed-card { transition: none; }
}

/* ============================================================
   ערכת נושא.
   שלושה מצבים: לפי המכשיר, בהיר קבוע, כהה קבוע.
   בחירה מפורשת גוברת על העדפת המערכת, כי מי שבחר בהיר בטלפון
   שעובר לכהה בלילה התכוון בדיוק לזה.
   ============================================================ */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* כהה קבוע */
:root[data-theme="dark"] {
  --paper: #0d1322;
  --card: #18223a;
  --ink: #eef2fb;
  --ink-soft: #a3b0cc;
  --line: #33415e;
  --surface-soft: #1e2a45;
  --road: #8fb0ff;
  --road-deep: #a6c1ff;
}

:root[data-theme="dark"] .q-img-wrap img { filter: brightness(.94); }

/* שתי שאריות אחרונות מה-QA */

/* כפתור ההקראה נמדד ב-39px. הוא ללא תווית, ולכן הכללים
   הכלליים לא תפסו אותו, ודווקא הוא הכפתור שמי שמתקשה
   בקריאה צריך להגיע אליו. */
#ttsBtn, .tts-btn, [data-tts] {
  min-height: 44px;
  min-width: 44px;
}

/* .today-lbl נמדד כחתוך רק כי הוא flex עם רוחב מדויק.
   nowrap עם מקום לגלישה מונע את זה בלי לשנות את המראה. */
.today-lbl {
  white-space: nowrap;
  flex-shrink: 0;
}

/* הפקדים החדשים במסך ההגדרות: תיבות בחירה שנמדדו קטן.
   הוספתי ארבע התאמות בשלב זה, וכל אחת הביאה select משלה. */
@media (max-width: 620px) {
  .toggle-row select,
  #themeSel, #explSel, #goalSel, #breakSel, #sessionSel {
    min-height: 46px;
    font-size: 16px;
    padding: 10px 12px;
  }
  .toggle-row {
    min-height: 52px;
    gap: 12px;
  }
  .switch { min-width: 46px; min-height: 30px; }
}

/* התגית בכרטיס המפגש. היא flex ברוחב מדויק, ולכן נמדדה
   כחתוכה גם כשהיא לא. גלישה מפורשת סוגרת את זה. */
.today-lbl, .today-card .today-lbl {
  white-space: nowrap;
  overflow: visible;
  min-width: max-content;
}

/* ============================================================
   מצב כהה: משטחים.
   הבעיה שהתגלתה: הטוקנים הוחלפו, אבל 63 סלקטורים נושאים רקע
   בהיר קשיח שלא עובר דרך טוקן. התוצאה הייתה מסך חצוי, שבו
   הסרגל נשאר לבן וכרטיס המפגש נשאר בהיר עם טקסט לבן עליו,
   כלומר בלתי קריא לחלוטין.

   כל משטח כאן ממופה לגוון כהה מקביל, בשמירת הגוון והרוויה,
   כדי שההיררכיה הצבעונית שנבנתה בבהיר תישמר גם בכהה.
   ============================================================ */
:root[data-theme="dark"] .profile-avatar { background: #3c3020; }
:root[data-theme="dark"] .is-member .nav a.active { background: #1c2335; }
:root[data-theme="dark"] .is-member .nav a:hover { background: #1a2230; }
:root[data-theme="dark"] .violet { background: #1c2335; }
:root[data-theme="dark"] .peach { background: #34261c; }
:root[data-theme="dark"] .mint { background: #1d2535; }
:root[data-theme="dark"] .sky { background: #1c2834; }
:root[data-theme="dark"] .today-card { background: #1c2334; }
:root[data-theme="dark"] .today-lbl { background: #1a2131; }
:root[data-theme="dark"] .daily-stack.back { background: #263246; }
:root[data-theme="dark"] .mini-track i { background: #212b3d; }
:root[data-theme="dark"] .topic-track { background: #222431; }
:root[data-theme="dark"] .focus-prompt { background: #212732; }
:root[data-theme="dark"] .focus-prompt-icon { background: #28313c; }
:root[data-theme="dark"] .question-card .row>.q-cat { background: #1a222f; }
:root[data-theme="dark"] .answer::before, :root[data-theme="dark"] .sess-k, :root[data-theme="dark"] .trial-k, :root[data-theme="dark"] .feed-ans-letter { background: #19232f; }
:root[data-theme="dark"] .answer:not(:disabled):hover, :root[data-theme="dark"] .sess-ans:not(:disabled):hover, :root[data-theme="dark"] .trial-ans:not(:disabled):hover, :root[data-theme="dark"] .feed-ans:not(:disabled):hover { background: #19212e; }
:root[data-theme="dark"] .answer.selected, :root[data-theme="dark"] .trial-ans.picked { background: #1a2230; }
:root[data-theme="dark"] .explanation, :root[data-theme="dark"] .sess-explain, :root[data-theme="dark"] .feed-explain { background: #1c2531; }
:root[data-theme="dark"] .question-card .tts-btn { background: #1a2330; }
:root[data-theme="dark"] .timer { background: #1b2332; }
:root[data-theme="dark"] .pill { background: #1d2637; }
:root[data-theme="dark"] .exam-bar .btn-warn { background: #321b1d; }
:root[data-theme="dark"] .subnav button.active { background: #1c2335; }
:root[data-theme="dark"] .mix-ico { background: #1c2034; }
:root[data-theme="dark"] .sess-why { background: #1b2332; }
:root[data-theme="dark"] .res-project { background: #181f2d; }
:root[data-theme="dark"] .is-member[data-screen=exam] #view>.grid-2>.card:first-child { background: #1c2435; }
:root[data-theme="dark"] .exam-choice.full { background: #1b2332; }
:root[data-theme="dark"] .choice-icon { background: #20283b; }
:root[data-theme="dark"] .quick .choice-icon { background: #34261c; }
:root[data-theme="dark"] .quick .choice-tag { background: #30261a; }
:root[data-theme="dark"] /* הגוון אומר במבט אחד במה לטפל קודם */
.notif--warn .notif-icon { background: #362d1d; }
:root[data-theme="dark"] .notif--promo .notif-icon { background: #352f1d; }

/* מצב כהה: טקסט וגבולות.
   טקסט כהה שנשאר על משטח שהפך כהה הוא הסיבה שהכותרת
   "הצעד הבא" נעלמה לגמרי. כל צבע טקסט כהה מתהפך לבהיר
   בשמירת הגוון, וכל גבול בהיר עובר לטוקן. */
:root[data-theme="dark"] .profile-avatar { color: #cec1b8; }
:root[data-theme="dark"] .is-member .nav::before { color: #bfbfc3; }
:root[data-theme="dark"] .is-member .nav a { color: #bfbec3; }
:root[data-theme="dark"] .product-wordmark { color: #bebfc3; }
:root[data-theme="dark"] .product-divider { color: #c1c1c3; }
:root[data-theme="dark"] .violet { color: #a9b4d6; }
:root[data-theme="dark"] .peach { color: #d3c2b5; }
:root[data-theme="dark"] .mint { color: #bbd5c7; }
:root[data-theme="dark"] .sky { color: #b5c4cf; }
:root[data-theme="dark"] .today-lbl { color: #a7b5d5; }
:root[data-theme="dark"] .today-sub { color: #bcbec4; }
:root[data-theme="dark"] .daily-check { color: #e6dccb; }
:root[data-theme="dark"] .daily-spark { color: #a0aed1; }
:root[data-theme="dark"] .section-bar>span { color: #bfc0c3; }
:root[data-theme="dark"] .way>i { color: #bfc0c3; }
:root[data-theme="dark"] .topic-line>span svg { color: #bebfc3; }
:root[data-theme="dark"] .topic-line>svg { color: #c0c0c3; }
:root[data-theme="dark"] .topic-empty { color: #bebfc3; }
:root[data-theme="dark"] .readiness-top>svg { color: #bdbfc4; }
:root[data-theme="dark"] .readiness-gauge span { color: #bfc0c3; }
:root[data-theme="dark"] .focus-prompt-icon { color: #bfc4ca; }
:root[data-theme="dark"] .focus-prompt .eyebrow { color: #c0c4c8; }
:root[data-theme="dark"] .focus-prompt h3 { color: #c7cbd0; }
:root[data-theme="dark"] .focus-prompt p { color: #c3c6c1; }
:root[data-theme="dark"] .focus-prompt a { color: #bfc4ca; }
:root[data-theme="dark"] .small-note { color: #bfc0c3; }
:root[data-theme="dark"] .small-note svg { color: #bfc0c3; }
:root[data-theme="dark"] .q-cat, :root[data-theme="dark"] .sess-cat, :root[data-theme="dark"] .trial-cat { color: #bebfc4; }
:root[data-theme="dark"] .answer, :root[data-theme="dark"] .sess-ans, :root[data-theme="dark"] .trial-ans, :root[data-theme="dark"] .feed-ans { border-color: var(--line); }
:root[data-theme="dark"] .answer::before, :root[data-theme="dark"] .sess-k, :root[data-theme="dark"] .trial-k, :root[data-theme="dark"] .feed-ans-letter { color: #bebfc3; }
:root[data-theme="dark"] .explanation strong { color: #bec4cd; }
:root[data-theme="dark"] .question-card .tts-btn { color: #b5bdca; }
:root[data-theme="dark"] .timer { color: #afb9d3; }
:root[data-theme="dark"] .exam-bar .btn-warn { color: #c6b7b9; }
:root[data-theme="dark"] .subnav button { color: #bebfc3; }
:root[data-theme="dark"] .subnav button.active { color: #a9b4d6; }
:root[data-theme="dark"] .study-sidebar-label { color: #bfc0c3; }
:root[data-theme="dark"] .mix-ico { color: #b4b8c7; }
:root[data-theme="dark"] .sess-why { color: #b6c0d0; }
:root[data-theme="dark"] .trial-free { color: #b7bac5; }
:root[data-theme="dark"] .res-project { border-color: var(--line); }
:root[data-theme="dark"] .field label { color: #bdbec4; }
:root[data-theme="dark"] .field input, :root[data-theme="dark"] .field select { border-color: var(--line); }
:root[data-theme="dark"] body[data-screen=study] #studyArea>.row:first-child { color: #bdbfc4; }
:root[data-theme="dark"] .is-member[data-screen=exam] #view>.grid-2>.card:first-child { border-color: var(--line); }
:root[data-theme="dark"] .exam-choice.full { border-color: var(--line); }
:root[data-theme="dark"] .choice-tag { color: #bcbec5; }
:root[data-theme="dark"] .exam-choice>p { color: #bdbec4; }
:root[data-theme="dark"] .exam-facts b { color: #b1bdd2; }
:root[data-theme="dark"] .exam-facts small { color: #bdbfc4; }
:root[data-theme="dark"] .choice-license { color: #bcbec4; }
:root[data-theme="dark"] .choice-license a { color: #b7bbc6; }
:root[data-theme="dark"] .quick .choice-tag { border-color: var(--line); color: #c8c4bf; }
:root[data-theme="dark"] .exam-intro-note { color: #bdbfc4; }
:root[data-theme="dark"] .exam-intro-note b { color: #bdbfc4; }
:root[data-theme="dark"] .exam-intro-note p { color: #bdbfc4; }
:root[data-theme="dark"] .exam-intro-note a { color: #b9bcc5; }
:root[data-theme="dark"] /* הגוון אומר במבט אחד במה לטפל קודם */
.notif--warn .notif-icon { color: #d9c8b1; }
:root[data-theme="dark"] .notif--promo .notif-icon { color: #ddd1b8; }

/* מצב כהה: משטחים בכתיב מקוצר.
   הסריקה הראשונה חיפשה #rrggbb בלבד ולכן פספסה את #fff,
   וזו הסיבה שהסרגל העליון נשאר לבן בוהק. */
:root[data-theme="dark"] .topbar { background: #212121; }
:root[data-theme="dark"] .is-member .product-topbar { background: #212121; }
:root[data-theme="dark"] .daily-stack { background: #212121; }
:root[data-theme="dark"] .way:hover { background: #212121; }
:root[data-theme="dark"] .answer, :root[data-theme="dark"] .sess-ans, :root[data-theme="dark"] .trial-ans, :root[data-theme="dark"] .feed-ans { background: #212121; }
:root[data-theme="dark"] .subnav button { background: #212121; }
:root[data-theme="dark"] body.high-contrast .today-card { background: #2a2a2a; }

/* שאריות שהמיפוי האוטומטי לא כיסה: רכיבים קבועים שלא
   יורשים רקע מההורה, ולכן הטקסט עליהם נמדד מול לבן. */
:root[data-theme="dark"] .cookie-banner,
:root[data-theme="dark"] .site-banner {
  background: #16203a;
  color: var(--ink);
  border-color: var(--line);
}
:root[data-theme="dark"] .skip-link {
  background: var(--card);
  color: var(--ink);
}
:root[data-theme="dark"] .fb-fab,
:root[data-theme="dark"] .a11y-fab {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}
:root[data-theme="dark"] .brand-wordmark,
:root[data-theme="dark"] .logo span { color: var(--ink); }

/* מצב כהה נשען על אותם משטחים גם כשהמכשיר מבקש כהה */

/* מצב כהה: כפתורים ראשיים.
   המיפוי האוטומטי הפך את צבע הטקסט שלהם לבהיר, אבל הרקע
   שלהם כבר היה כחול בהיר, והתוצאה הייתה יחס 2.14 בלבד.
   כפתור ראשי הוא בדיוק מה שחייב לבלוט, ולכן מוגדר במפורש. */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn.btn-primary,
:root[data-theme="dark"] button.btn-primary {
  background: #2f62d8;
  color: #ffffff;
  border-color: #2f62d8;
}
:root[data-theme="dark"] .btn-primary:hover {
  background: #3d74ee;
  border-color: #3d74ee;
}

/* כפתור אישור העוגיות יושב על רקע כהה משלו */
:root[data-theme="dark"] .cookie-banner .btn-primary {
  background: #ffc93c;
  color: #2a1f00;
  border-color: #ffc93c;
}
:root[data-theme="dark"] .cookie-banner a { color: #ffd76b; }

/* הכפתור בכרטיס המפגש. המיפוי האוטומטי הפך את הטקסט שלו
   לבהיר, אבל הרקע נשאר כחול בהיר, ויחס הניגודיות ירד ל-2.14.
   זה הכפתור הראשי של המסך, ולכן מוגדר במפורש. */
:root[data-theme="dark"] .today-go {
  background: #2f62d8;
  color: #ffffff;
  border-color: #2f62d8;
}
:root[data-theme="dark"] .today-card:hover .today-go,
:root[data-theme="dark"] .today-go:hover {
  background: #3d74ee;
  border-color: #3d74ee;
}

/* שני משטחים שהמיפוי פספס: האחד רקע מקוצר, השני יושב
   בתוך בלוק מדיה ולכן לא נסרק. */
:root[data-theme="dark"] .badge.adhd {
  background: #2a2140;
  color: #d6c9f0;
}
:root[data-theme="dark"] .res-scale-gap {
  background: #1e2a45;
}

/* ============================================================
   מצב כהה: משטחים קבועים.
   הסרגל הצדדי, הסרגל העליון והבאנר לא קיבלו רקע כהה, כי הרקע
   שלהם מוגדר בתוך בלוקי מדיה שהמיפוי האוטומטי לא נכנס אליהם,
   או יורש מההורה. התוצאה בצילום: גוף כהה עם סרגל לבן בוהק.
   כאן הם מוגדרים במפורש, מחוץ לכל מדיה, כדי שזה לא יקרה שוב.
   ============================================================ */
:root[data-theme="dark"] .nav,
:root[data-theme="dark"] .is-member .nav,
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .is-member .topbar,
:root[data-theme="dark"] .product-topbar {
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
}
:root[data-theme="dark"] .nav a,
:root[data-theme="dark"] .topbar a { color: var(--ink); }
:root[data-theme="dark"] .nav a:not(.active) { color: var(--ink-soft); }

/* כרטיס ההצעה בצד, שנשאר בהיר עם טקסט כהה */
:root[data-theme="dark"] .focus-prompt {
  background: var(--surface-soft);
  color: var(--ink);
  border-color: var(--line);
}
:root[data-theme="dark"] .focus-prompt-icon {
  background: #24304a;
  color: var(--ink);
}

/* מעטפת האפליקציה, שלא תישאר לבנה מאחורי הסרגל */
:root[data-theme="dark"] .app-shell,
:root[data-theme="dark"] .is-member { background: var(--paper); }

/* ============================================================
   מצב פיד כאפליקציה.

   הבעיה: בדפדפן נייד ההחלקה נלחמת עם הדפדפן. משיכה מעלה
   גוללת את הדף ומזיזה את השאלה כלפי מעלה, סרגל הכתובת
   מתקפל ומשנה את גובה החלון באמצע המחווה, ומשיכה מלמעלה
   מפעילה רענון. התוצאה היא שהמחווה שלנו והמחווה של
   הדפדפן מתנגשות, וזה מרגיש שבור.

   הפתרון: כשהפיד פתוח, הדף עצמו מפסיק לגלול. המסך נעול
   לגובה החלון, והגלילה היחידה שקיימת היא בתוך הכרטיס,
   ורק אם התוכן באמת ארוך מדי.
   ============================================================ */

/* נעילת הדף. position: fixed על ה-body הוא הדרך היחידה
   שעובדת בספארי, כי overflow: hidden לבדו לא מספיק שם. */
html.feed-app,
body.feed-app {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* מונע רענון במשיכה מלמעלה ואת אפקט הגומי בקצוות */
  overscroll-behavior: none;
  touch-action: none;
}

/* כל מה שאינו הפיד יורד מהמסך: סרגלים, באנרים, כפתורים
   צפים. באפליקציה אין שכבות דפדפן מסביב. */
body.feed-app .nav,
body.feed-app .topbar,
body.feed-app .site-banner,
body.feed-app .cookie-banner,
body.feed-app .fb-fab,
body.feed-app .pwa-bar,
body.feed-app footer,
body.feed-app .site-footer { display: none; }

/* המעטפת תופסת בדיוק את החלון. dvh ולא vh: vh מחושב לפי
   החלון הגדול, ולכן חלק מהתוכן נחתך מתחת לסרגל הכתובת. */
body.feed-app .feed-shell {
  position: fixed;
  inset: 0;
  max-width: none;
  margin: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px
           calc(10px + env(safe-area-inset-bottom, 0px));
  gap: 10px;
  background: var(--paper);
  overflow: hidden;
  touch-action: none;
}

body.feed-app .feed-topbar {
  flex: 0 0 auto;
  margin-bottom: 0;
}

/* הכרטיס ממלא את מה שנשאר ומתמרכז אנכית, כך שהשאלה
   יושבת באותו מקום בכל פעם ולא קופצת בין שאלות. */
body.feed-app .feed-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;   /* גלילה פנימית לא בורחת לדף */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  margin: 0;
}

body.feed-app .feed-hint {
  flex: 0 0 auto;
  margin: 0;
  padding-bottom: 0;
}

/* הכפתור לנגישות נשאר, אבל מעל הכל */
body.feed-app .a11y-fab { z-index: 300; }

/* במסך רחב הפיד חסום ממילא, אבל אם מישהו מקטין חלון
   באמצע, לא נועלים לו את הדף. */
@media (min-width: 821px) {
  html.feed-app, body.feed-app {
    position: static;
    overflow: auto;
    touch-action: auto;
  }
  body.feed-app .feed-shell { position: static; height: auto; }
}

/* ============================================================
   קישורים בתוך טקסט רץ, בדפים המשפטיים ובדף יצירת הקשר.
   נמדדו בגובה 21 פיקסל, מתחת לסף שאפשר לפגוע בו באצבע.
   דווקא שם יושבים כתובת התמיכה והקישור למדיניות הביטולים,
   כלומר בדיוק מה שמישהו מחפש כשהוא צריך עזרה.

   הפתרון אינו להגדיל אותם, כי זה ישבור את זרימת הקריאה.
   במקום זה שטח הנגיעה גדל מסביב לקישור בלי לשנות את מראהו.
   ============================================================ */
@media (max-width: 620px) {
  .legal-body p a,
  .legal-body li a,
  #view p a,
  #view li a,
  #view .muted a,
  #view .hint a,
  .today-card p a,
  .card p a {
    position: relative;
    /* מרווח פנימי אנכי שלא דוחף את השורות, כי הקישור inline */
    padding-block: 10px;
    /* שטח הנגיעה עצמו, שקוף ומחוץ לזרימה */
    touch-action: manipulation;
  }
  .legal-body p a::after,
  .legal-body li a::after,
  #view p a::after,
  #view li a::after,
  #view .muted a::after,
  #view .hint a::after,
  .today-card p a::after,
  .card p a::after {
    content: "";
    position: absolute;
    inset: -11px -4px;
  }
  /* שורות הטקסט מתרווחות מעט, כדי ששטחי הנגיעה לא ייגעו */
  .legal-body p, .legal-body li { line-height: 1.9; }
}

/* שאריות בדף הבית: כפתור סגירת ההתראה וקישור בתוכה. */
@media (max-width: 620px) {
  .notif-close { min-width: 40px; min-height: 40px; }
  .notif-text a, .notif-body a {
    position: relative;
    padding-block: 10px;
  }
  .notif-text a::after, .notif-body a::after {
    content: "";
    position: absolute;
    inset: -11px -4px;
  }
}

/* ============================================================
   הבלוג.
   הלוגו כאן היה span עם האות ת ובלי שום CSS, ולכן נראה כמו
   אות שנשרה מהעיצוב. הדפים עצמם היו רשימת כרטיסים שטוחה.
   ============================================================ */

.blog-top .logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.3px;
}
.blog-top .logo-mark { flex-shrink: 0; border-radius: 10px; }
.blog-top .logo-word b { color: var(--road); font-weight: 700; }
.blog-nav {
  display: flex;
  gap: 18px;
  margin-inline-start: 26px;
}
.blog-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.blog-nav a:hover { color: var(--road); }

/* ── כותרת הבלוג ── */
.blog-hero {
  padding: 52px 0 38px;
  max-width: 640px;
}
.blog-hero .eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--road);
  margin-bottom: 12px;
}
.blog-hero h1 {
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.18;
  letter-spacing: -.035em;
  margin: 0 0 12px;
}
.blog-hero p { color: var(--ink-soft); font-size: 17px; margin: 0; }

/* ── הכרטיס המוביל ──
   המאמר הראשון מקבל שטח כפול, כדי שלרשימה תהיה נקודת כניסה
   ולא רק רצף אחיד שהעין מחליקה עליו. */
.article-lead-card {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--card);
  text-decoration: none;
  color: inherit;
  margin-bottom: 26px;
  transition: border-color .18s ease, transform .18s ease;
}
.article-lead-card:hover { border-color: var(--road); transform: translateY(-2px); }
.alc-body { padding: 30px 30px 26px; display: flex; flex-direction: column; justify-content: center; }
.alc-body h2 {
  font-size: clamp(21px, 2.6vw, 28px);
  line-height: 1.3;
  margin: 12px 0 10px;
  letter-spacing: -.02em;
}
.alc-body p { color: var(--ink-soft); line-height: 1.65; margin: 0 0 16px; }
.alc-meta, .ac-meta {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--ink-soft);
}
.alc-art { background: var(--surface-soft); display: grid; place-items: center; min-height: 190px; }
.alc-art svg, .alc-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── רשת הכרטיסים ── */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 16px;
}
.article-card {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--card);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.article-card:hover { border-color: var(--road); transform: translateY(-2px); }
.article-card h2 {
  font-size: 18.5px;
  line-height: 1.35;
  margin: 10px 0 8px;
  letter-spacing: -.015em;
}
.article-card p {
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 14px;
  flex: 1;
}

.article-empty {
  padding: 50px 20px;
  text-align: center;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: 15px;
}

/* ── הזמנה לתרגול, בתחתית הרשימה ── */
.blog-cta {
  margin: 34px 0 20px;
  padding: 32px;
  border-radius: 18px;
  background: var(--surface-soft);
  text-align: center;
}
.blog-cta h2 { font-size: 24px; margin: 0 0 8px; letter-spacing: -.02em; }
.blog-cta p { color: var(--ink-soft); margin: 0 0 18px; }

/* ── המאמר עצמו ── */
.article-single { max-width: 720px; margin-inline: auto; }
.article-back { padding: 26px 0 6px; }
.article-back a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.article-back a::before { content: "\2190"; margin-inline-end: 7px; }
.article-back a:hover { color: var(--road); }

.article-head { padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.article-head h1 {
  font-size: clamp(27px, 4.4vw, 38px);
  line-height: 1.22;
  letter-spacing: -.03em;
  margin: 13px 0 10px;
}
.article-head .article-lead { font-size: 18px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 14px; }
.article-meta { display: flex; gap: 9px; font-size: 13.5px; color: var(--ink-soft); }

.article-hero-img {
  width: 100%;
  border-radius: 15px;
  margin-bottom: 26px;
  display: block;
}

/* גוף המאמר: מידת שורה קריאה והיררכיה ברורה */
.article-body { font-size: 17.5px; line-height: 1.85; }
.article-body h2 {
  font-size: 24px;
  line-height: 1.3;
  margin: 36px 0 12px;
  letter-spacing: -.02em;
}
.article-body h3 { font-size: 20px; margin: 28px 0 10px; }
.article-body p { margin: 0 0 18px; }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-inline-start: 22px; }
.article-body li { margin-bottom: 8px; }
.article-body a { color: var(--road); }
.article-body blockquote {
  margin: 22px 0;
  padding: 14px 18px;
  border-inline-start: 3px solid var(--road);
  background: var(--surface-soft);
  border-radius: 0 10px 10px 0;
  color: var(--ink-soft);
}
.article-body img { max-width: 100%; border-radius: 12px; }

.article-cta {
  margin: 40px 0 0;
  padding: 28px;
  border-radius: 16px;
  background: var(--surface-soft);
  text-align: center;
}
.article-cta h3 { font-size: 21px; margin: 0 0 8px; letter-spacing: -.02em; }
.article-cta p { color: var(--ink-soft); margin: 0 0 18px; }

.article-more {
  max-width: 1040px;
  margin: 46px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.article-more h2 { font-size: 21px; margin: 0 0 16px; }

/* ── מובייל ── */
@media (max-width: 760px) {
  .article-lead-card { grid-template-columns: 1fr; }
  .alc-art { min-height: 150px; order: -1; }
  .alc-body { padding: 22px 20px; }
  .blog-hero { padding: 34px 0 26px; }
  .blog-nav { display: none; }   /* הקישורים קיימים בפוטר */
  .article-body { font-size: 16.5px; }
  .blog-cta, .article-cta { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .article-card, .article-lead-card { transition: none; }
  .article-card:hover, .article-lead-card:hover { transform: none; }
}