/* Раздел «Билеты ПДД»: сетка билетов, темы, прохождение. */

.pdd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(4.5rem,1fr));gap:.5rem;margin:1.25rem 0}
.pdd-grid__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;
	min-height:4.25rem;padding:.5rem;background:var(--tb-card);border:1px solid var(--tb-hair);
	border-radius:var(--tb-radius-sm);text-decoration:none;color:var(--tb-ink);transition:border-color .16s var(--tb-ease)}
.pdd-grid__item:hover{border-color:var(--tb-tone)}
.pdd-grid__item b{font-family:var(--tb-font-mono);font-size:1.25rem;line-height:1}
.pdd-grid__item span{font-size:var(--tb-fs-meta);color:var(--tb-mute)}

.pdd-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:.5rem;margin:1.25rem 0}
.pdd-themes__item{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
	padding:.875rem 1rem;background:var(--tb-card);border:1px solid var(--tb-hair);
	border-radius:var(--tb-radius-sm);text-decoration:none;color:var(--tb-ink);min-height:var(--tb-hit)}
.pdd-themes__item:hover{border-color:var(--tb-tone)}
.pdd-themes__n{font-family:var(--tb-font-mono);font-size:var(--tb-fs-meta);color:var(--tb-mute)}

.pdd{margin:1.5rem 0}
/* Кнопки раздела — flex, а он перебивает атрибут hidden: без этого правила
   «Пройти заново» видно ещё до конца прохождения. */
.pdd [hidden]{display:none!important}
.pdd__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;
	padding:.75rem .875rem;background:var(--tb-card);border:1px solid var(--tb-hair);border-radius:var(--tb-radius-sm)}
.pdd__dots{display:flex;flex-wrap:wrap;gap:.25rem}
.pdd__dot{width:1.75rem;height:1.75rem;border-radius:6px;border:1px solid var(--tb-hair);
	background:transparent;color:var(--tb-mute);font-family:var(--tb-font-mono);font-size:.75rem;cursor:pointer}
.pdd__dot.is-now{border-color:var(--tb-tone);color:var(--tb-ink)}
.pdd__dot.is-right{background:#1F7A4D;border-color:#1F7A4D;color:#fff}
.pdd__dot.is-wrong{background:#B3382C;border-color:#B3382C;color:#fff}
.pdd__meta{display:flex;align-items:center;gap:.875rem;font-family:var(--tb-font-mono);font-size:var(--tb-fs-ui)}
.pdd__timer{color:var(--tb-tone)}

/* Полоса прогресса вместо восьмисот точек в марафоне. */
.pdd__progress{flex:1;min-width:12rem;height:.5rem;border-radius:99px;background:var(--tb-hair);overflow:hidden}
.pdd__progress i{display:block;height:100%;background:var(--tb-tone);transition:width .2s var(--tb-ease)}
.pdd__progress-n{font-size:var(--tb-fs-meta);color:var(--tb-mute)}
.pdd__resumed{margin:0 0 .75rem;padding:.625rem .875rem;border-radius:var(--tb-radius-sm);
	background:var(--tb-raise);border:1px solid var(--tb-hair);font-size:var(--tb-fs-ui);color:var(--tb-mute)}

/* Кнопки запуска и строка актуальности на хабе раздела. */
.pdd-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.25rem 0}
.pdd-cta .tb-btn{min-height:var(--tb-hit)}
.pdd-updated{display:flex;align-items:center;gap:.5rem;margin:0 0 1rem;
	font-size:var(--tb-fs-ui);color:var(--tb-mute)}
.pdd-updated__dot{width:.5rem;height:.5rem;border-radius:99px;background:#1F7A4D;flex:none}

.pdd__stage{margin-top:1rem}
.pdd__head{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;
	font-size:var(--tb-fs-meta);letter-spacing:var(--tb-tracking-label);text-transform:uppercase;color:var(--tb-mute)}
.pdd__img{margin:.875rem 0 0}
.pdd__img img{width:100%;max-width:34rem;height:auto;border-radius:var(--tb-radius-sm);background:#fff}
.pdd__q{font-size:var(--tb-fs-h3);line-height:var(--tb-lh-h3);margin:.875rem 0 1rem}

.pdd__err,.pdd__chg{margin:-.375rem 0 1rem;font-size:var(--tb-fs-ui);color:var(--tb-mute)}
.pdd__err{color:#D07A2E}
.pdd__chg b{color:var(--tb-ink)}

.pdd__answers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.pdd__answer{display:flex;align-items:flex-start;gap:.75rem;width:100%;text-align:left;
	padding:.875rem 1rem;min-height:var(--tb-hit);background:var(--tb-card);color:var(--tb-ink);
	border:1px solid var(--tb-hair);border-radius:var(--tb-radius-sm);cursor:pointer;
	font-size:var(--tb-fs-ui);line-height:1.5;transition:border-color .16s var(--tb-ease)}
.pdd__answer:hover:not([disabled]){border-color:var(--tb-tone)}
.pdd__answer[disabled]{cursor:default;opacity:.9}
.pdd__answer-n{flex:none;font-family:var(--tb-font-mono);color:var(--tb-mute)}
.pdd__answer.is-right{border-color:#1F7A4D;background:rgba(31,122,77,.14)}
.pdd__answer.is-wrong{border-color:#B3382C;background:rgba(179,56,44,.14)}

.pdd__explain{margin-top:.875rem;padding:.875rem 1rem;border-radius:var(--tb-radius-sm);
	border:1px solid var(--tb-hair);background:var(--tb-raise);font-size:var(--tb-fs-ui);line-height:1.55}
.pdd__explain.is-right{border-color:#1F7A4D}
.pdd__explain.is-wrong{border-color:#B3382C}
.pdd__explain p{margin:.375rem 0 0}
.pdd__punkt{color:var(--tb-mute)}

.pdd__foot{display:flex;gap:.75rem;margin-top:1.25rem}
.pdd__result h2{font-size:var(--tb-fs-h2);margin:0}
.pdd__missed{margin:.75rem 0 0;padding-left:1.25rem;font-size:var(--tb-fs-ui);line-height:1.55}
.pdd__missed i{color:var(--tb-mute);font-style:normal}

@media (max-width:640px){
	.pdd__dot{width:1.5rem;height:1.5rem;font-size:.6875rem}
	.pdd__q{font-size:1.125rem}
}