/* ========================================================================== */
/* Карандашные заметки. Модуль полностью отключается через academy-features.js */
/* ========================================================================== */

.academy-crayons {
    position: fixed;
    z-index: 9400;
    left: 50%;
    top: calc(var(--header-h, 80px) + 8px);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px 7px;
    border-radius: 18px;
    background: rgba(255, 252, 244, .87);
    border: 1px solid rgba(86, 102, 122, .10);
    box-shadow: 0 7px 22px rgba(72, 88, 111, .10);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.academy-crayons[hidden] { display: none !important; }

.academy-crayon {
    --crayon-color: #e96868;
    --crayon-shadow: rgba(110, 65, 65, .18);
    position: relative;
    width: 55px;
    height: 15px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transform: rotate(var(--crayon-tilt, -1deg));
    transition: transform .14s ease, filter .14s ease;
    outline: none;
}
.academy-crayon:nth-child(2) { --crayon-tilt: .8deg; }
.academy-crayon:nth-child(3) { --crayon-tilt: -1.4deg; }
.academy-crayon:nth-child(4) { --crayon-tilt: 1.2deg; }
.academy-crayon:nth-child(5) { --crayon-tilt: -.6deg; }
.academy-crayon:hover { transform: translateY(-2px) rotate(var(--crayon-tilt, -1deg)); }
.academy-crayon.is-active {
    transform: translateY(-4px) rotate(var(--crayon-tilt, -1deg));
    filter: drop-shadow(0 4px 3px var(--crayon-shadow));
}
.academy-crayon:focus-visible { outline: 2px solid rgba(66, 113, 169, .42); outline-offset: 5px; border-radius: 8px; }

.academy-crayon__body {
    position: absolute;
    left: 9px;
    right: 5px;
    top: 2px;
    bottom: 2px;
    border-radius: 3px 6px 5px 3px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.24), transparent 34%, rgba(44,26,17,.08) 100%),
        repeating-linear-gradient(96deg, rgba(255,255,255,.08) 0 2px, rgba(0,0,0,.025) 2px 4px),
        var(--crayon-color);
    box-shadow: inset 0 0 0 1px rgba(69, 56, 45, .10);
}
.academy-crayon__body::after {
    content: "";
    position: absolute;
    left: 11px;
    right: 7px;
    top: 3px;
    height: 3px;
    border-radius: 999px;
    border-top: 1px solid rgba(255,255,255,.34);
    opacity: .72;
}
.academy-crayon__tip {
    position: absolute;
    left: 0;
    top: 3px;
    width: 12px;
    height: 9px;
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    background: var(--crayon-color);
    filter: brightness(.86) saturate(.95);
}
.academy-crayon__end {
    position: absolute;
    right: 0;
    top: 3px;
    width: 8px;
    height: 9px;
    border-radius: 0 5px 5px 0;
    background: var(--crayon-color);
    filter: brightness(.92);
}

.academy-crayon-status {
    width: 0;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    color: #6b7280;
    font: 12px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    transition: max-width .18s ease, opacity .18s ease, margin .18s ease;
}
.academy-crayons.is-drawing .academy-crayon-status {
    width: auto;
    max-width: 126px;
    margin-left: 3px;
    opacity: 1;
}

.academy-drawing-canvas {
    position: fixed;
    z-index: 9000;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
    touch-action: none;
    contain: strict;
    mix-blend-mode: multiply;
}
body.academy-drawing-active .academy-drawing-canvas {
    pointer-events: auto;
    cursor: crosshair;
}
body.academy-drawing-active {
    -webkit-user-select: none;
    user-select: none;
}
body.academy-drawing-active .academy-crayons,
body.academy-drawing-active .academy-crayons * {
    pointer-events: auto;
}

/* Короткая подсказка показывается только после первого включения режима. */
.academy-drawing-hint {
    position: fixed;
    z-index: 9450;
    left: 50%;
    top: calc(var(--header-h, 80px) + 52px);
    transform: translateX(-50%);
    max-width: min(420px, calc(100vw - 30px));
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(35, 46, 61, .90);
    color: #fff;
    font: 12px/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
    pointer-events: none;
    opacity: 0;
    transition: opacity .16s ease;
}
.academy-drawing-hint.is-visible { opacity: 1; }

@media (max-width: 860px) {
    .academy-crayons {
        gap: 5px;
        padding: 7px 9px 8px;
        max-width: calc(100vw - 20px);
    }
    .academy-crayon { width: 46px; height: 17px; }
    .academy-crayons.is-drawing .academy-crayon-status { display: none; }
    .academy-drawing-hint {
        max-width: calc(100vw - 24px);
    }
}

@media (max-width: 420px) {
    .academy-crayons { gap: 3px; padding-left: 7px; padding-right: 7px; }
    .academy-crayon { width: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    .academy-crayon,
    .academy-crayon-status,
    .academy-drawing-hint { transition: none !important; }
}


/* ==========================================================================
   2026-09-28 pencils + eraser toolbar refresh
   ========================================================================== */
.academy-crayons {
    position: fixed;
    z-index: 9400;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.academy-crayons__deck {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    padding: 0 10px;
}
.academy-crayon,
.academy-eraser {
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    outline: none;
    transform-origin: 50% 0%;
    transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
.academy-crayon {
    --crayon-color: #e96868;
    --crayon-shadow: rgba(110,65,65,.18);
    width: 28px;
    height: 118px;
    margin-top: -46px;
    filter: drop-shadow(0 3px 3px rgba(44, 53, 71, .14));
}
.academy-crayon[data-slot="1"] { transform: rotate(-8deg) translateY(4px); height: 112px; }
.academy-crayon[data-slot="2"] { transform: rotate(-3deg) translateY(1px); height: 124px; }
.academy-crayon[data-slot="3"] { transform: rotate(2deg) translateY(6px); height: 108px; }
.academy-crayon[data-slot="4"] { transform: rotate(7deg) translateY(0px); height: 126px; }
.academy-crayon[data-slot="5"] { transform: rotate(11deg) translateY(5px); height: 114px; }
.academy-crayon:hover { filter: drop-shadow(0 8px 7px rgba(44, 53, 71, .18)); }
.academy-crayon.is-active[data-slot="1"] { transform: rotate(-8deg) translateY(22px); }
.academy-crayon.is-active[data-slot="2"] { transform: rotate(-3deg) translateY(24px); }
.academy-crayon.is-active[data-slot="3"] { transform: rotate(2deg) translateY(20px); }
.academy-crayon.is-active[data-slot="4"] { transform: rotate(7deg) translateY(27px); }
.academy-crayon.is-active[data-slot="5"] { transform: rotate(11deg) translateY(21px); }
.academy-crayon:focus-visible,
.academy-eraser:focus-visible {
    outline: 2px solid rgba(66, 113, 169, .42);
    outline-offset: 4px;
    border-radius: 10px;
}
.academy-crayon__body,
.academy-crayon__wood,
.academy-crayon__lead,
.academy-crayon__label,
.academy-crayon__cap { position: absolute; left: 50%; transform: translateX(-50%); display:block; }
.academy-crayon__body {
    top: 16px;
    width: 20px;
    height: calc(100% - 33px);
    border-radius: 8px 8px 4px 4px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.34) 0 7%, rgba(255,255,255,.08) 8% 18%, transparent 19% 100%),
      linear-gradient(90deg, rgba(255,255,255,.26) 0 14%, rgba(255,255,255,0) 15% 82%, rgba(0,0,0,.14) 100%),
      repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 2px, rgba(0,0,0,.03) 2px 5px),
      var(--crayon-color);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.35), inset 0 -1px 2px rgba(0,0,0,.12);
}
.academy-crayon__body::before {
    content:"";
    position:absolute;
    left:2px; right:2px; top:24px; height:30px;
    border-radius:6px;
    background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(248,242,233,.96));
    box-shadow: inset 0 0 0 1px rgba(120,108,97,.12);
}
.academy-crayon__body::after {
    content:"";
    position:absolute;
    left:4px; right:4px; top:35px; height:8px;
    background: repeating-linear-gradient(90deg, rgba(120,100,90,.18) 0 1px, transparent 1px 6px);
    opacity:.9;
}
.academy-crayon__label {
    top: 51px;
    width: 10px;
    height: 19px;
    border-radius: 999px;
    background: rgba(255,255,255,.54);
    mix-blend-mode: screen;
    opacity: .45;
}
.academy-crayon__cap {
    top: 6px;
    width: 16px;
    height: 10px;
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(0,0,0,.12)), color-mix(in srgb, var(--crayon-color) 70%, #ffffff 30%);
}
.academy-crayon__wood {
    bottom: 8px;
    width: 18px;
    height: 20px;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    background: linear-gradient(180deg, #f3ddbb 0%, #e7c792 55%, #d4ab74 100%);
    filter: saturate(.95) brightness(1.02);
}
.academy-crayon__lead {
    bottom: 6px;
    width: 5px;
    height: 10px;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    background: linear-gradient(180deg, color-mix(in srgb, var(--crayon-color) 55%, #342822 0%), color-mix(in srgb, var(--crayon-color) 85%, #19130f 15%));
}

.academy-eraser {
    width: 34px;
    height: 76px;
    margin-left: 10px;
    margin-top: -16px;
    transform: rotate(9deg) translateY(8px);
    filter: drop-shadow(0 4px 4px rgba(44,53,71,.14));
}
.academy-eraser:hover { filter: drop-shadow(0 8px 7px rgba(44,53,71,.20)); }
.academy-eraser.is-active { transform: rotate(9deg) translateY(18px); }
.academy-eraser__top,
.academy-eraser__body,
.academy-eraser__band,
.academy-eraser__paper { position:absolute; left:50%; transform:translateX(-50%); display:block; }
.academy-eraser__body {
    top: 10px; width: 25px; height: 54px; border-radius: 8px 8px 10px 10px;
    background: linear-gradient(90deg, #ffd2d8 0%, #ffaeb8 52%, #ef8e9a 100%);
}
.academy-eraser__paper {
    top: 22px; width: 21px; height: 18px; border-radius: 4px;
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,241,235,.98));
    box-shadow: inset 0 0 0 1px rgba(120,108,97,.10);
}
.academy-eraser__band {
    top: 16px; width: 25px; height: 8px; border-radius: 6px;
    background: linear-gradient(180deg, #d7f1ff, #a7d8f5);
}
.academy-eraser__top {
    top: 2px; width: 21px; height: 12px; border-radius: 8px 8px 3px 3px;
    background: linear-gradient(180deg, #ffe3e7, #ffb8c0);
}

.academy-crayon-status {
    width: 0;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    color: #6b7280;
    font: 12px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    transition: max-width .18s ease, opacity .18s ease, margin .18s ease;
    margin-top: -4px;
}
.academy-crayons.is-drawing .academy-crayon-status {
    width: auto;
    max-width: 126px;
    margin-left: 0;
    opacity: 1;
}
body.academy-drawing-active .academy-drawing-canvas {
    pointer-events: auto;
    cursor: crosshair;
}
body.academy-drawing-erasing .academy-drawing-canvas {
    cursor: cell;
}

@media (max-width: 860px) {
    .academy-crayons__deck { gap: 0; padding: 0 6px; }
    .academy-crayon { width: 24px; height: 102px; margin-top: -42px; }
    .academy-crayon__body { width: 18px; }
    .academy-eraser { width: 30px; height: 68px; margin-left: 6px; margin-top: -14px; }
    .academy-eraser__body, .academy-eraser__band { width: 22px; }
    .academy-eraser__paper { width: 18px; }
    .academy-crayons.is-drawing .academy-crayon-status { display: none; }
}
@media (max-width: 420px) {
    .academy-crayon { width: 22px; height: 94px; }
    .academy-eraser { width: 28px; height: 62px; }
}

/* ==========================================================================
   2026-09-28 realistic embedded pencil assets
   ========================================================================== */
.academy-crayons {
    position: fixed;
    z-index: 9400;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible;
}
.academy-crayons__deck {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    padding: 0 10px;
    overflow: visible;
}
.academy-crayon,
.academy-eraser {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
    overflow: visible;
    transform-origin: 50% 0%;
    transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
.academy-crayon {
    height: 126px !important;
    width: auto !important;
    margin-top: -58px !important;
    filter: drop-shadow(0 5px 7px rgba(44,53,71,.16));
}
.academy-crayon[data-slot="1"] { transform: rotate(-7deg) translateY(8px); }
.academy-crayon[data-slot="2"] { transform: rotate(-2deg) translateY(2px); }
.academy-crayon[data-slot="3"] { transform: rotate(2deg) translateY(10px); }
.academy-crayon[data-slot="4"] { transform: rotate(7deg) translateY(4px); }
.academy-crayon[data-slot="5"] { transform: rotate(11deg) translateY(11px); }
.academy-crayon:hover { filter: drop-shadow(0 8px 9px rgba(44,53,71,.22)); }
.academy-crayon.is-active[data-slot="1"] { transform: rotate(-7deg) translateY(28px); }
.academy-crayon.is-active[data-slot="2"] { transform: rotate(-2deg) translateY(24px); }
.academy-crayon.is-active[data-slot="3"] { transform: rotate(2deg) translateY(30px); }
.academy-crayon.is-active[data-slot="4"] { transform: rotate(7deg) translateY(24px); }
.academy-crayon.is-active[data-slot="5"] { transform: rotate(11deg) translateY(31px); }
.academy-crayon__image {
    display: block;
    height: 100%;
    width: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.academy-eraser {
    height: 62px !important;
    width: auto !important;
    margin-left: 10px;
    margin-top: -3px !important;
    transform: rotate(9deg) translateY(12px);
    filter: drop-shadow(0 4px 6px rgba(44,53,71,.16));
}
.academy-eraser:hover { filter: drop-shadow(0 8px 8px rgba(44,53,71,.22)); }
.academy-eraser.is-active { transform: rotate(9deg) translateY(22px); }
.academy-eraser__image {
    display: block;
    height: 100%;
    width: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.academy-crayon-status {
    margin-top: -2px;
}
.academy-crayon:focus-visible,
.academy-eraser:focus-visible {
    outline: 2px solid rgba(66,113,169,.42);
    outline-offset: 3px;
    border-radius: 10px;
}
@media (max-width: 860px) {
    .academy-crayons__deck { gap: 0; padding: 0 4px; }
    .academy-crayon { height: 110px !important; margin-top: -52px !important; }
    .academy-eraser { height: 54px !important; margin-left: 6px; margin-top: -2px !important; }
}
@media (max-width: 420px) {
    .academy-crayon { height: 96px !important; margin-top: -46px !important; }
    .academy-eraser { height: 46px !important; }
}

/* ==========================================================================
   2026-09-28 bottom draggable tool dock + corrected cutouts
   ========================================================================== */
.academy-crayons {
    top: auto !important;
    bottom: 10px;
    left: 89%;
    right: auto !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
    cursor: grab;
    touch-action: none;
}
.academy-crayons.is-dragging,
.academy-crayons.is-dragging * { cursor: grabbing !important; }
.academy-crayons__deck {
    align-items: flex-end !important;
    gap: 1px !important;
    padding: 0 6px !important;
}
.academy-crayon {
    margin-top: 0 !important;
    width: auto !important;
    filter: drop-shadow(0 5px 6px rgba(44,53,71,.18));
}
.academy-crayon[data-slot="1"] { height: 148px !important; transform: rotate(-6deg) translateY(5px); }
.academy-crayon[data-slot="2"] { height: 142px !important; transform: rotate(-2deg) translateY(9px); }
.academy-crayon[data-slot="3"] { height: 151px !important; transform: rotate(1.5deg) translateY(3px); }
.academy-crayon[data-slot="4"] { height: 145px !important; transform: rotate(5deg) translateY(8px); }
.academy-crayon[data-slot="5"] { height: 149px !important; transform: rotate(8deg) translateY(4px); }
.academy-crayon.is-active[data-slot="1"] { transform: rotate(-6deg) translateY(-10px); }
.academy-crayon.is-active[data-slot="2"] { transform: rotate(-2deg) translateY(-13px); }
.academy-crayon.is-active[data-slot="3"] { transform: rotate(1.5deg) translateY(-9px); }
.academy-crayon.is-active[data-slot="4"] { transform: rotate(5deg) translateY(-14px); }
.academy-crayon.is-active[data-slot="5"] { transform: rotate(8deg) translateY(-11px); }
.academy-crayon__image {
    height: 100% !important;
    width: auto !important;
    object-fit: contain;
}
.academy-eraser {
    position: relative;
    width: 58px !important;
    height: 146px !important;
    margin: 0 0 0 8px !important;
    transform: rotate(5deg) translateY(8px) !important;
    filter: drop-shadow(0 5px 7px rgba(44,53,71,.18));
}
.academy-eraser.is-active {
    transform: rotate(5deg) translateY(-10px) !important;
}
.academy-eraser__image {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 118px !important;
    height: auto !important;
    max-width: none !important;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
    object-fit: contain;
}
.academy-crayon-status { display: none !important; }
.academy-drawing-hint {
    bottom: auto !important;
}

@media (max-width: 860px) {
    .academy-crayons { bottom: 8px; }
    .academy-crayons__deck { gap: 0 !important; padding: 0 4px !important; }
    .academy-crayon[data-slot="1"] { height: 122px !important; }
    .academy-crayon[data-slot="2"] { height: 117px !important; }
    .academy-crayon[data-slot="3"] { height: 125px !important; }
    .academy-crayon[data-slot="4"] { height: 120px !important; }
    .academy-crayon[data-slot="5"] { height: 123px !important; }
    .academy-eraser { width: 49px !important; height: 123px !important; margin-left: 5px !important; }
    .academy-eraser__image { width: 100px !important; }
}
@media (max-width: 420px) {
    .academy-crayon[data-slot="1"] { height: 106px !important; }
    .academy-crayon[data-slot="2"] { height: 102px !important; }
    .academy-crayon[data-slot="3"] { height: 109px !important; }
    .academy-crayon[data-slot="4"] { height: 104px !important; }
    .academy-crayon[data-slot="5"] { height: 107px !important; }
    .academy-eraser { width: 44px !important; height: 108px !important; }
    .academy-eraser__image { width: 88px !important; }
}


/* 2026-09-28 v5: reliable click-vs-drag + lower dock */
.academy-crayons { bottom: -18px !important; }
@media (max-width: 860px) { .academy-crayons { bottom: -16px !important; } }
@media (max-width: 420px) { .academy-crayons { bottom: -14px !important; } }