/* Бесплатный курс «Агенты без страха»: стили уроков поверх ds.css */
.ls-lead{max-width:44ch;margin-top:22px;font:400 clamp(19px,1.6vw,22px)/1.5 var(--f-sans);color:var(--slate)}
.ls-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ls-h{font:700 clamp(34px,4.4vw,64px)/.95 var(--f-cond);text-transform:uppercase;letter-spacing:-.02em;max-width:18ch}
.ls-sub{margin-top:16px;max-width:56ch;font:400 18px/1.55 var(--f-sans);color:var(--slate)}
.dark .ls-sub{color:var(--gray-300)}
.ls-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(28px,4vw,48px)}
.ls-card{display:flex;flex-direction:column;gap:12px;padding:26px 24px;border-radius:var(--r-card);background:var(--canvas)}
.ls-card.hl{background:var(--yellow)}
.ls-card small{font:400 var(--t-mono)/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--gray-500)}
.ls-card.hl small{color:rgba(0,0,0,.6)}
.ls-card h3{font:700 clamp(26px,2.4vw,34px)/1 var(--f-cond);text-transform:uppercase;letter-spacing:-.01em}
.ls-card p{font:400 16px/1.5 var(--f-sans)}
.ls-card .ex{margin-top:auto;padding-top:14px;border-top:1px solid rgba(0,0,0,.12);font-size:15px;color:var(--slate)}
.ls-card.hl .ex{color:rgba(0,0,0,.72)}
.quiz{display:grid;gap:10px;margin-top:clamp(24px,3vw,36px);max-width:860px}
.quiz button{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;padding:20px 22px;border:1.5px solid var(--gray-300);border-radius:var(--r-card);background:var(--white);text-align:left;font:500 17px/1.45 var(--f-sans);color:var(--black);cursor:pointer;transition:border-color .2s,background .2s}
.quiz button:hover{border-color:var(--black)}
.quiz button .v{display:none;font:400 15px/1.45 var(--f-sans);color:var(--slate)}
.quiz button.on .v{display:block}
.quiz button.on.ok{background:var(--yellow);border-color:var(--black)}
.quiz button.on.no{background:var(--canvas)}
.quiz button .v b{color:var(--black)}
.ls-loop{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:clamp(28px,4vw,48px);counter-reset:st}
.ls-loop li{list-style:none;counter-increment:st;display:flex;flex-direction:column;gap:10px;padding:22px 20px;border-radius:var(--r-card);background:#141414}
.ls-loop li::before{content:counter(st,decimal-leading-zero);font:400 var(--t-mono)/1 var(--f-mono);color:var(--yellow)}
.ls-loop b{font:700 24px/1 var(--f-cond);text-transform:uppercase;color:var(--white)}
.ls-loop p{font:400 15px/1.45 var(--f-sans);color:var(--gray-300)}
.ls-note{margin-top:22px;max-width:60ch;font:500 19px/1.5 var(--f-sans);color:var(--white)}
.prompt{position:relative;margin-top:clamp(22px,3vw,32px);max-width:860px;padding:26px 24px 76px;border-radius:var(--r-card);background:var(--black);color:var(--white);font:400 16px/1.6 var(--f-mono);white-space:pre-wrap}
.prompt .btn{position:absolute;left:24px;bottom:20px;height:42px}
.gl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(24px,3vw,36px)}
.gl div{padding:24px;border-radius:var(--r-card);background:var(--white);display:flex;flex-direction:column;gap:10px}
.gl b{font:700 26px/1 var(--f-cond);text-transform:uppercase}
.gl p{font:400 16px/1.5 var(--f-sans)}
.gl q{font:400 15px/1.45 var(--f-sans);color:var(--slate);quotes:"«" "»"}
.gl q::before{content:"На созвоне: «"}
.prog{display:grid;gap:8px;margin-top:clamp(24px,3vw,36px);max-width:860px}
.prog a,.prog span{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:14px;padding:16px 20px;border-radius:16px;background:rgba(0,0,0,.06);font:500 17px/1.35 var(--f-sans);color:var(--black);text-decoration:none}
.prog .now{background:var(--black);color:var(--white)}
.prog small{font:400 var(--t-mono)/1 var(--f-mono);letter-spacing:.04em;opacity:.6}
.prog em{font:400 var(--t-mono)/1 var(--f-mono);font-style:normal;text-transform:uppercase;opacity:.55}
.ls-soft{margin-top:28px;font:400 17px/1.5 var(--f-sans)}
.ls-soft a{color:var(--black);font-weight:600}
@media (max-width:1000px){.ls-three,.ls-loop,.gl{grid-template-columns:1fr}}

/* Общие для всех уроков: заголовок урока, врезки, словарь, карточки, вкладки, сравнение, навигация */
.doc-hero .h-display.ls-title{font-size:clamp(40px,8vw,112px);max-width:none}
.ls-aside{margin-top:clamp(22px,3vw,32px);max-width:62ch;padding:22px 24px;border-left:4px solid var(--yellow);background:rgba(255,241,0,.12);border-radius:0 var(--r-card) var(--r-card) 0;font:400 17px/1.55 var(--f-sans)}
.dark .ls-aside{color:var(--gray-200);background:rgba(255,241,0,.08)}
.ls-text{max-width:66ch;margin-top:clamp(18px,2.4vw,26px);display:flex;flex-direction:column;gap:14px;font:400 18px/1.6 var(--f-sans)}
.dark .ls-text{color:var(--gray-200)}
.ls-text b{font-weight:600}
.ls-flips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(24px,3vw,36px)}
.ls-flip{position:relative;min-height:190px;padding:22px;border:0;border-radius:var(--r-card);background:var(--white);text-align:left;cursor:pointer;font:inherit;color:var(--black)}
.ls-flip .f{display:flex;flex-direction:column;gap:10px}
.ls-flip .f b{font:700 26px/1 var(--f-cond);text-transform:uppercase}
.ls-flip .f small{font:400 var(--t-mono)/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--gray-500);margin-top:auto}
.ls-flip .bk{display:none;font:400 16px/1.5 var(--f-sans)}
.ls-flip.flipped{background:var(--yellow)}
.ls-flip.flipped .f{display:none}.ls-flip.flipped .bk{display:block}
.ls-search{width:100%;max-width:520px;height:54px;margin-top:clamp(20px,3vw,28px);padding:0 18px;border:1.5px solid var(--gray-300);border-radius:14px;font:400 17px/1 var(--f-sans);background:var(--white)}
.ls-search:focus{outline:none;border-color:var(--black)}
.gl-group{margin-top:clamp(28px,4vw,44px)}
.gl-group>h3{font:400 var(--t-mono)/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--gray-500)}
.gl .later{align-self:flex-start;padding:5px 10px;border-radius:99px;background:var(--canvas);font:400 12px/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--gray-500)}
.gl .now{background:var(--yellow);color:var(--black)}
.ls-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(22px,3vw,32px)}
.ls-tabs button{height:44px;padding:0 20px;border:1.5px solid var(--black);border-radius:99px;background:transparent;font:500 15px/1 var(--f-sans);cursor:pointer}
.ls-tabs button[aria-selected="true"]{background:var(--black);color:var(--white)}
[data-panel][hidden]{display:none}
.ls-compare{width:100%;max-width:960px;margin-top:clamp(24px,3vw,36px);border-collapse:separate;border-spacing:0;font:400 16px/1.45 var(--f-sans)}
.ls-compare th,.ls-compare td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(0,0,0,.1)}
.ls-compare th{font:400 var(--t-mono)/1.2 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--gray-500)}
.ls-compare td:first-child{font-weight:600;width:28%}
.ls-list{display:grid;gap:10px;margin-top:clamp(22px,3vw,32px);max-width:860px;counter-reset:li}
.ls-list>div{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:20px 22px;border-radius:var(--r-card);background:var(--white);counter-increment:li}
.ls-list>div::before{content:counter(li,decimal-leading-zero);font:400 var(--t-mono)/1.6 var(--f-mono);color:var(--gray-500)}
.ls-list b{display:block;margin-bottom:4px;font:600 18px/1.35 var(--f-sans)}
.ls-list p{font:400 16px/1.5 var(--f-sans);color:var(--slate)}
.ls-nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,36px)}
.ls-nav .btn{height:56px}
.prog a{transition:background .2s}.prog a:hover{background:rgba(0,0,0,.12)}
.prog .done em{opacity:1}
@media (max-width:1000px){.ls-flips{grid-template-columns:1fr}.ls-compare td:first-child{width:auto}.ls-compare{font-size:15px}.ls-compare th,.ls-compare td{padding:12px 10px}}

/* Закрывающая кавычка у фраз «На созвоне», карточки списка на белом фоне и скругленный верх темных секций (в ds.css .dark перебивает фон .rs) */
.gl q::after{content:"»"}
.rs.white .ls-list>div{background:var(--canvas)}
.rs.dark{background:var(--prev,var(--white))}
.gl [data-gl][hidden]{display:none}
.ls-flip{display:flex;flex-direction:column}
.ls-flip .f{flex:1}
.gl .gl-more{margin-top:auto;padding-top:4px;font:500 14px/1.2 var(--f-sans);color:var(--black);text-underline-offset:3px}
.rs.canvas .ls-card:not(.hl),.rs.canvas .ls-aside{background:var(--white)}
/* По итогам тестирования на телефоне: подсказка на карточках заметнее, длинные кнопки переносятся, программа без пустой колонки */
.ls-flip .f small{color:var(--slate);font-size:13px}
.ls-flip .f small::after{content:" →"}
@media (max-width:700px){
  .ls-nav .btn{height:auto;min-height:56px;max-width:100%;padding-top:14px;padding-bottom:14px;white-space:normal;line-height:1.3}
  .prog a,.prog span{grid-template-columns:auto minmax(0,1fr);gap:6px 12px;padding:14px 16px;font-size:16px}
  .prog small{grid-row:span 2;margin-top:3px;align-self:start}
  .prog em{grid-column:2}
  .term-sw button{min-height:34px;padding:0 12px}
}
/* Мини-тест в конце урока */
.ls-mq{max-width:860px;margin-top:clamp(28px,3vw,40px);font:600 clamp(19px,1.8vw,22px)/1.35 var(--f-sans)}
.ls-mq small{display:block;margin-bottom:8px;font:400 var(--t-mono)/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--slate)}
.ls-mq+.quiz{margin-top:14px}
.ls-mini-res{max-width:860px;margin-top:24px;padding:18px 22px;border-radius:var(--r-card);background:var(--yellow);font:500 17px/1.45 var(--f-sans)}
