/* learn-parts.js: a question in parts, one part at a time (behind hubs.json learn_parts) */
.lpp-nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 4px}
.lpp-tile{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:56px;min-height:44px;padding:0 12px;border-radius:12px;border:2px solid var(--rule-2);background:var(--paper);color:var(--ink);font:700 16px/1 var(--f-body);cursor:pointer}
.lpp-tile .t{display:none;color:var(--play-ink,var(--study))}
.lpp-tile.is-done .t{display:block}
.lpp-tile.is-cur{background:var(--study-btn,#0a7f8a);border-color:var(--study-btn,#0a7f8a);color:#fff}   /* white on --study was 3.38:1 (axe, mobile sweep 19 Oct); the button colour is 4.6:1 */
.lpp-tile.is-cur .t{color:#fff}
.lpp-tile:focus-visible{outline:3px solid var(--study);outline-offset:2px}
.lpp-of{margin-inline-start:auto;font:600 14.5px/1.2 var(--f-body);color:var(--ink-3)}
.lq.lpp-on > .lq-part[hidden]{display:none !important}
.lq.lpp-on > .lq-part{border-top:0;padding-top:8px}
#lpActions .lpp-hide{display:none !important}
/* a tall stem's figure: the room left, at its own size, panned inside */
.lpp-dock{overflow:auto;overscroll-behavior:contain;border-radius:14px;margin:8px 0 6px;-webkit-overflow-scrolling:touch}
.lpp-dock > *{margin:0 !important}
.lpp-dock:focus-visible{outline:3px solid var(--study);outline-offset:2px}
.lq .lpp-see{display:inline-flex !important;width:auto !important;flex:none !important;align-self:flex-start;margin:0 0 4px !important}
.lq .lpp-dock.has-play-under + .lpp-see{display:flex !important;width:fit-content !important;position:relative;margin:-52px 0 4px 56px !important}   /* beside Play, under the card (learn.css mn-play-row) */
.lpp-fig{display:block;min-width:0}
.lq .lpp-see[hidden]{display:none !important}   /* nothing more to see than the box shows (learn-parts.js seeFor) */   /* the box and See figure, one block (learn-parts.js dock) */
@media (min-width:1100px){.lq-part:has(> .lq-say.has-fig) .lpp-fig > .lpp-dock{margin-top:0}}   /* beside the bubble the card starts at the column's top, as before */
/* music taller than its box at 6 px a space scrolls inside it (learn-parts.js syCue): the edge it runs past fades, as
   sideways music does (learn.css .mn-sx), and See figure under it carries a down arrow */
.lpp-dock.lpp-sy{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 32px),transparent)}
.lpp-dock.lpp-sy.at-end{-webkit-mask-image:linear-gradient(180deg,transparent,#000 32px);mask-image:linear-gradient(180deg,transparent,#000 32px)}
.lq .lpp-dock.lpp-sy + .lpp-see::before{content:"";flex:none;width:16px;height:16px;margin-inline-end:8px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5v10M3.5 8.5 8 13l4.5-4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5v10M3.5 8.5 8 13l4.5-4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
@media (forced-colors:active){.lpp-dock.lpp-sy,.lpp-dock.lpp-sy.at-end{-webkit-mask-image:none;mask-image:none}}
/* the whole figure */
.lpp-whole{position:fixed;inset:0;z-index:200;background:var(--surface);display:flex;flex-direction:column;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
.lpp-whole-b{flex:1;overflow:auto;overscroll-behavior:contain}
.lpp-whole-b > *{margin:0 0 12px !important;max-width:none}
.lpp-close{flex:none !important;margin-top:12px;width:100%;min-height:52px}
/* options that are narrow drawings: two to a row */
.lq.lpp-on .lq-in.t-mcq.lpp-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lq.lpp-on .lq-in.t-mcq.lpp-two > .lq-tile{position:relative;min-width:0;padding:22px 10px 8px;justify-content:center}
.lq.lpp-on .lq-in.t-mcq.lpp-two > .lq-tile > .k{position:absolute;top:6px;inset-inline-start:6px;transform:scale(.8);transform-origin:0 0}
.lq.lpp-on .lq-in.t-mcq.lpp-two > .lq-tile > .c{flex:none}
/* marked: a part's result on its tile */
.lpp-tile.is-right{border-color:var(--ln-right)}
.lpp-tile.is-wrong{border-color:var(--ln-wrong)}
.lpp-tile.is-part{border-color:var(--ln-part,var(--ln-wrong))}
.lpp-tile.is-right:not(.is-cur){background:color-mix(in srgb,var(--ln-right) 12%,var(--paper))}
.lpp-tile.is-wrong:not(.is-cur){background:color-mix(in srgb,var(--ln-wrong) 12%,var(--paper))}
.lpp-tile.is-wrong .t,.lpp-tile.is-part .t{display:none}
.lq.lpp-on .lq-res .say.lpp-said{display:none}
/* a phone: the question's aids in the footer beside Check, icons only, 44 px squares (the full name stays as the
   button's accessible name); Check takes all the room left, the obvious primary button */
#lpActions:has(> .lpp-aid){gap:8px}
#lpActions > .lpp-aid{flex:0 0 44px !important;align-self:center;width:44px !important;height:44px !important;min-width:44px;min-height:44px;padding:0 !important;font-size:0 !important;border-radius:12px;justify-content:center}
#lpActions > .lpp-aid svg{flex:none;width:20px;height:20px}
#lpActions:has(> .lpp-aid) > .lp-btn:not(.lpp-aid){flex:1 1 auto !important;min-width:0}