/* Задача №444. Инструкция по кабинету исполнителя.
   Читают с телефона, поэтому крупный шрифт, широкие зоны нажатия и
   снимки экрана во всю ширину карточки. */

.mc-guide {
    padding: 12px 0 24px;
}

.mc-guide__top h1 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
}

.mc-guide__top p {
    color: var(--mc-muted, #6b7280);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 16px;
}




/* Поиск по инструкции: главное действие экрана. */
.mc-guide__search {
    position: relative;
    margin-bottom: 10px;
}

.mc-guide__search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #98a2b3;
    font-size: 14px;
}

.mc-guide__search input {
    width: 100%;
    padding: 12px 38px;
    border: 1px solid var(--mc-line, #e6e9f0);
    border-radius: 14px;
    background: var(--mc-card, #fff);
    color: inherit;
    font-size: 15px;
}

.mc-guide__clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #98a2b3;
    font-size: 22px;
    line-height: 1;
}

.mc-guide__chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 12px;
    -webkit-overflow-scrolling: touch;
}

.mc-guide__chips button {
    flex: 0 0 auto;
    padding: 7px 13px;
    border: 1px solid var(--mc-line, #e6e9f0);
    border-radius: 999px;
    background: var(--mc-card, #fff);
    color: inherit;
    font-size: 13px;
    font-weight: 600;
}

.mc-guide__lead {
    color: var(--mc-muted, #6b7280);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 14px;
}

/* Разделы плитками: вся карта инструкции видна на одном экране. */
.mc-guide__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mc-guide__card {
    position: relative;
    text-align: left;
    padding: 14px 12px 12px;
    border: 1px solid var(--mc-line, #e6e9f0);
    border-radius: 16px;
    background: var(--mc-card, #fff);
    color: inherit;
}

.mc-guide__cico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 8px;
    border-radius: 11px;
    background: var(--mc-soft, #eef2ff);
    color: var(--mc-accent, #3b5bdb);
}

.mc-guide__cttl {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.mc-guide__cnum {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 12px;
    font-weight: 700;
    color: #c3c9d6;
}

/* Найденные пункты. */
.mc-guide__foundttl {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mc-muted, #6b7280);
    margin-bottom: 8px;
}

.mc-guide__hit {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--mc-line, #e6e9f0);
    border-radius: 14px;
    background: var(--mc-card, #fff);
    color: inherit;
}

.mc-guide__hitsec {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--mc-accent, #3b5bdb);
    margin-bottom: 4px;
}

.mc-guide__hittext {
    display: block;
    font-size: 13px;
    line-height: 1.5;
}

.mc-guide__hit mark {
    background: #ffe9a8;
    border-radius: 3px;
    padding: 0 2px;
}

.mc-guide__empty {
    padding: 16px;
    border-radius: 14px;
    background: var(--mc-card, #fff);
    border: 1px solid var(--mc-line, #e6e9f0);
    font-size: 14px;
    line-height: 1.5;
}

/* Открытый раздел. */
.mc-guide__back {
    border: 0;
    background: transparent;
    color: var(--mc-accent, #3b5bdb);
    font-size: 14px;
    font-weight: 600;
    padding: 4px 0 10px;
}


.mc-guide__ico {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--mc-soft, #eef2ff);
    color: var(--mc-accent, #3b5bdb);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-guide__sechead {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.mc-guide__sechead b {
    display: block;
    font-size: 17px;
    line-height: 1.3;
}

.mc-guide__sechead span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--mc-muted, #6b7280);
}

.mc-guide__h2 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 8px;
}

.mc-guide__nav {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.mc-guide__nav button {
    flex: 1 1 0;
    padding: 11px 12px;
    border: 1px solid var(--mc-line, #e6e9f0);
    border-radius: 14px;
    background: var(--mc-card, #fff);
    color: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

/* Найденный пункт подсвечиваем, чтобы глаз сразу нашёл его в разделе. */
.is-hit {
    background: #fff6d8;
    border-radius: 8px;
    box-shadow: 0 0 0 6px #fff6d8;
}

.mc-guide__shot {
    margin: 0 0 14px;
}

.mc-guide__shot img {
    display: block;
    width: 100%;
    max-width: 250px;
    cursor: zoom-in;
    margin: 0 auto;
    border: 1px solid var(--mc-line, #e6e9f0);
    border-radius: 14px;
}

.mc-guide__shot figcaption {
    margin-top: 6px;
    text-align: center;
    font-size: 12px;
    line-height: 1.4;
    color: var(--mc-muted, #6b7280);
}

.mc-guide__steps {
    margin: 0 0 14px;
    padding-left: 20px;
}

.mc-guide__steps li {
    margin-bottom: 9px;
    font-size: 14px;
    line-height: 1.5;
}

.mc-guide__tips {
    background: #fff8e6;
    border: 1px solid #f2e2b8;
    border-radius: 14px;
    padding: 12px 14px;
}

.mc-guide__tipsttl {
    font-size: 13px;
    font-weight: 700;
    color: #8a6412;
    margin-bottom: 6px;
}

.mc-guide__tips ul {
    margin: 0;
    padding-left: 18px;
}

.mc-guide__tips li {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 6px;
    color: #6b5417;
}

.mc-guide__tips li:last-child { margin-bottom: 0; }

.mc-guide__up {
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

/* Тёмный режим кабинета: карточки и подсказки не должны светить белым. */
body.theme-dark .mc-guide__tips,
[data-theme="dark"] .mc-guide__tips {
    background: rgba(242, 226, 184, .12);
    border-color: rgba(242, 226, 184, .3);
}

body.theme-dark .mc-guide__tips li,
[data-theme="dark"] .mc-guide__tips li,
body.theme-dark .mc-guide__tipsttl,
[data-theme="dark"] .mc-guide__tipsttl {
    color: #f0d79a;
}

/* Блок инструкции на главной и в настройках. */
.mc-guidelink {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin-bottom: 14px;
    border-radius: 16px;
    background: var(--mc-card, #fff);
    border: 1px solid var(--mc-line, #e6e9f0);
    color: inherit;
    text-decoration: none;
}

.mc-guidelink__ico {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: var(--mc-soft, #eef2ff);
    color: var(--mc-accent, #3b5bdb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.mc-guidelink__text { flex: 1 1 auto; }

.mc-guidelink__text b {
    display: block;
    font-size: 15px;
}

.mc-guidelink__text span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--mc-muted, #6b7280);
}

.mc-guidelink > i:last-child { color: #b6bdcc; font-size: 13px; }

/* Снимок во весь экран: с телефона мелкие подписи на скриншоте не прочесть. */
.mc-guide__zoom {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(12, 16, 28, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.mc-guide__zoom img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
}

.mc-guide__zoom span {
    position: absolute;
    top: 14px;
    right: 18px;
    color: #fff;
    font-size: 30px;
    line-height: 1;
}

/* Задача №501. Видеоинструкция внутри раздела. */
.mc-guide__video {
    margin-bottom: 14px;
}

.mc-guide__play {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 13px 14px;
    border: 1px solid var(--mc-line, #e6e9f0);
    border-radius: 14px;
    background: var(--mc-card, #fff);
    color: inherit;
}

.mc-guide__playico {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.mc-guide__play b {
    display: block;
    font-size: 15px;
}

.mc-guide__play span span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--mc-muted, #6b7280);
}

.mc-guide__player {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    border-radius: 14px;
    background: #000;
}