/* Kids card editor (js/kids-cards.js). Only elements created by that script and the overlay class it adds are styled;
   the youth profile never gets .kids-cards, so nothing here can reach it.
   The overlay's "flat controls" rule (box-shadow/transform/animation/filter: none !important on every button) and the
   teal :active rule are outranked with the #codeOverlay id below; animations therefore live on non-button children. */
html[data-profile="kids"] #codeOverlay.kids-cards{--kc-card:calc(var(--kc-cell) * .8);--kc-lcard:max(54px,calc(var(--kc-cell) * .86));--kc-ink:#1f4a50;--kc-line:#c9ddd2}
html[data-profile="kids"] #codeOverlay.kids-cards :is(#codePalette,.ed-selection-tools,.code-prog-actions,#edPaletteToggle,.ed-font-controls,.code-tabs){display:none!important}
html[data-profile="kids"] #codeOverlay.kids-cards .code-prog-col{display:flex;flex-direction:column;gap:8px;overflow-x:hidden;overflow-y:auto;min-height:0;padding:10px 12px 12px;scrollbar-width:thin}
html[data-profile="kids"] #codeOverlay.kids-cards .code-prog-header{flex:none;margin:0}
html[data-profile="kids"] #codeOverlay.kids-cards #edClear{padding:0;min-width:48px}
html[data-profile="kids"] #codeOverlay.kids-cards #edClear svg{width:24px;height:24px}
html[data-profile="kids"] #codeOverlay.kids-cards .prog-output{flex:none;margin:0;min-height:0}

/* stage: board + run pack */
html[data-profile="kids"] #codeOverlay.kids-cards #progList.kc-stage{flex:none;display:flex;align-items:center;justify-content:center;gap:12px;padding:10px;min-height:0;overflow:visible;border:0;border-radius:24px;background:linear-gradient(180deg,#e2f3f0,#d0eae6);isolation:auto}
.kc-stage[data-layout="stack"]{flex-direction:column;gap:10px}
.kc-board{display:grid;grid-template-columns:repeat(6,var(--kc-cell));grid-auto-rows:var(--kc-cell);gap:clamp(5px,calc(var(--kc-cell) * .1),9px);direction:ltr;flex:none}
.kc-cell{position:relative;width:var(--kc-cell);height:var(--kc-cell);display:flex;align-items:center;justify-content:center;border-radius:calc(var(--kc-cell) * .26);border:2px solid #fff;background:rgba(255,255,255,.62);box-shadow:inset 0 2px 5px rgba(20,90,100,.10)}
.kc-cell.kc-empty{background:rgba(255,255,255,.36);border-style:dashed;border-color:rgba(255,255,255,.95);box-shadow:none}
.kc-cell.kc-next{background:rgba(255,255,255,.72);animation:kcnext 1.6s ease-in-out infinite}
.kc-no{position:absolute;left:7px;top:3px;font-size:11px;font-weight:800;color:rgba(31,74,80,.34);pointer-events:none}
.kc-cell:not(.kc-empty) .kc-no{display:none}
.kc-cell.kc-target{background:rgba(255,255,255,.95);box-shadow:0 0 0 3px #087e83}
.kc-cell.kc-target::before{content:'';position:absolute;left:-6px;top:8%;bottom:8%;width:5px;border-radius:3px;background:#087e83;z-index:3}
.kc-cell.kc-target.kc-after::before{left:auto;right:-6px}
.kc-cell.kc-target.kc-empty::before{display:none}
.kc-board.kc-shake{animation:kcshake .38s}
@keyframes kcnext{0%,100%{box-shadow:0 0 0 0 rgba(8,126,131,0)}50%{box-shadow:0 0 0 4px rgba(8,126,131,.25)}}
@keyframes kcshake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* cards (also styles the drag ghost, which lives on <body>) */
.kc-card{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:var(--kc-card,56px);height:var(--kc-card,56px);margin:0;padding:0;border-radius:calc(var(--kc-card,56px) * .26);border:2px solid var(--kc-edge);background:linear-gradient(180deg,var(--kc-top),var(--kc-bg));color:#1f4a50;font-family:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.kc-board .kc-card{touch-action:none}
.kc-list .kc-card{touch-action:pan-x}
.kc-face{display:flex;align-items:center;justify-content:center;width:100%;height:100%;pointer-events:none}
.kc-card svg.ico{width:56%;height:56%;stroke-width:2.1}
.kc-card .kc-led,.kc-card .kc-dot{width:80%;height:80%}
.kc-note{font-weight:900;font-size:calc(var(--kc-card,56px) * .38);line-height:1;color:#4a2f6a;letter-spacing:-.04em}
.kc-note.kc-hi::before{content:'';position:absolute;left:50%;top:15%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#4a2f6a}
.kc-mel{display:flex;flex-direction:column;align-items:center;gap:0;max-width:100%}
.kc-mel svg.ico{width:40%;height:40%}
.kc-mel b{font-size:calc(var(--kc-card,56px) * .3);line-height:1;font-weight:900;color:#4a2f6a}
.kc-list .kc-mel b{font-size:calc(var(--kc-lcard) * .3)}
.kc-tag{position:absolute;left:4px;top:4px;display:grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:#fff;color:#1f4a50;font-style:normal;font-weight:900;font-size:calc(var(--kc-card,56px) * .2);line-height:1}
.kc-pop .kc-face{animation:kcpop .3s ease-out}
@keyframes kcpop{0%{transform:scale(.4);opacity:.2}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
html[data-profile="kids"] #codeOverlay.kids-cards .kc-card{box-shadow:0 4px 0 var(--kc-edge),inset 0 2px 0 rgba(255,255,255,.6)!important;transform:none!important;filter:none!important}
html[data-profile="kids"] #codeOverlay.kids-cards .kc-card:not(:disabled):active{background:linear-gradient(180deg,var(--kc-top),var(--kc-bg))!important;color:#1f4a50!important}
html[data-profile="kids"] #codeOverlay.kids-cards .kc-card.kc-sel{outline:4px solid #087e83;outline-offset:2px}
html[data-profile="kids"] #codeOverlay.kids-cards .kc-card.kc-active{outline:5px solid #ff9f1c;outline-offset:2px;box-shadow:0 4px 0 var(--kc-edge),0 0 0 9px rgba(255,159,28,.35)!important;z-index:2}
.kc-card.kc-dragging{opacity:.32}
.kc-card:focus-visible,.kc-val:focus-visible,.kc-tab:focus-visible{outline:4px solid #d29b21;outline-offset:2px}
.kc-ghost{position:fixed;left:0;top:0;z-index:10060;pointer-events:none;opacity:.95;box-shadow:0 14px 26px rgba(20,50,55,.35),0 4px 0 var(--kc-edge)}
.kc-ghost.kc-del{opacity:.55}
.kc-ghost.kc-nodrop{opacity:.3}
body.kc-dragging-any{cursor:grabbing;-webkit-user-select:none;user-select:none}

/* value badge: 28px to look at, 46px to touch */
.kc-val{position:absolute;right:-4px;bottom:-4px;z-index:2;min-width:28px;height:28px;padding:0 7px;border-radius:14px;border:2px solid #1f4a50;background:#fff;color:#1f4a50;font:800 14px/1 inherit;cursor:pointer;touch-action:manipulation}
.kc-val::after{content:'';position:absolute;inset:-9px}
html[data-profile="kids"] #codeOverlay.kids-cards .kc-val{min-height:28px;box-shadow:0 2px 0 rgba(31,74,80,.35)!important}
html[data-profile="kids"] #codeOverlay.kids-cards .kc-val:not(:disabled):active{background:#fff3c4!important;color:#1f4a50!important}

/* run pack */
.kc-runpack{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:92px;flex:none}
.kc-stage[data-layout="stack"] .kc-runpack{flex-direction:row;width:100%;gap:12px}
html[data-profile="kids"] #codeOverlay.kids-cards .kc-repeat{flex:none;display:grid;place-items:center;width:52px;height:52px;min-height:52px;padding:0;border:0;border-bottom:4px solid #b7861a;border-radius:50%;background:#ffd23f;color:#5b3f00;cursor:pointer;touch-action:manipulation}
html[data-profile="kids"] #codeOverlay.kids-cards .kc-repeat:not(:disabled):active{background:#f2bb18!important;color:#5b3f00!important}
html[data-profile="kids"] #codeOverlay.kids-cards .kc-repeat.kc-flash{animation:kcflash .55s ease-out!important}
@keyframes kcflash{0%{background:#fff7c2;outline:6px solid rgba(255,210,63,.85)}100%{background:#ffd23f;outline:6px solid rgba(255,210,63,0)}}
html[data-profile="kids"] #codeOverlay.kids-cards :is(#runBtn,#stopProgBtn){width:92px;height:92px;min-height:92px;padding:0;border-radius:50%;font-size:14px;text-align:center;line-height:1}
html[data-profile="kids"] #codeOverlay.kids-cards #runBtn:disabled{opacity:.45}
html[data-profile="kids"] #codeOverlay.kids-cards .kc-stage[data-layout="stack"] :is(#runBtn,#stopProgBtn){flex:1;width:auto;height:64px;min-height:64px;border-radius:32px}
.kc-runin{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;gap:2px}
.kc-runico{display:flex;align-items:center;justify-content:center}
.kc-runico svg.ico{width:36px;height:36px}
.kc-count{display:flex;align-items:center;justify-content:center;gap:3px;min-height:18px;font-size:16px;font-weight:900}
.kc-count svg.ico{width:15px;height:15px}
.kc-stage[data-layout="stack"] .kc-runin{flex-direction:row;gap:12px}
.kc-stage[data-layout="stack"] .kc-runico svg.ico{width:32px;height:32px}
.kc-stage[data-layout="stack"] .kc-count{font-size:18px}

/* status line / selection buttons */
.kc-bar{flex:none;display:flex;align-items:center;justify-content:center;min-height:52px}
.kc-bar [hidden],.kc-tray [hidden]{display:none!important}
.kc-msg{margin:0;padding:6px 10px;font-size:14px;font-weight:700;line-height:1.35;color:#56716b;text-align:center;border-radius:14px}
.kc-msg.kc-warn{color:#7a5200;background:#fff1c7}
.kc-msg.kc-good{color:#0a6a4a;background:#dcf4e6}
.kc-selbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
html[data-profile="kids"] #codeOverlay.kids-cards .kc-selbar button{display:flex;align-items:center;gap:6px;min-width:56px;min-height:48px;padding:6px 14px;border:2px solid #b9d3c6;border-radius:14px;background:#fff;color:#1f4a50;font:800 14px/1.1 inherit;cursor:pointer}
html[data-profile="kids"] #codeOverlay.kids-cards .kc-selbar .kc-danger{color:#a4372a;border-color:#efb5a6}
html[data-profile="kids"] #codeOverlay.kids-cards .kc-selbar button:not(:disabled):active{background:#dff1ea!important;color:#1f4a50!important}
html[data-profile="kids"] #codeOverlay.kids-cards .kc-selbar .kc-danger:not(:disabled):active{background:#fbe0d9!important;color:#a4372a!important}

/* tray: part tabs + card list */
.kc-tray{flex:none;display:flex;flex-direction:column;gap:6px;padding:8px;border:2px solid var(--kc-line);border-radius:22px;background:#fff;transition:background .15s,border-color .15s}
.kc-tray.kc-hot{background:#fde9e4;border-color:#e58c7a}
.kc-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;touch-action:pan-x}
.kc-tabs::-webkit-scrollbar,.kc-list::-webkit-scrollbar{display:none}
html[data-profile="kids"] #codeOverlay.kids-cards .kc-tab{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:66px;min-height:62px;padding:4px 8px;border:2px solid transparent;border-radius:16px;background:#eef4ee;color:#40666a;font:700 12px/1.1 inherit;cursor:pointer}
html[data-profile="kids"] #codeOverlay.kids-cards .kc-tab[aria-selected="true"]{background:#d9eee4;border-color:#087e83;color:#0b5f63}
html[data-profile="kids"] #codeOverlay.kids-cards .kc-tab:not(:disabled):active{background:#cfe9dc!important;color:#0b5f63!important}
.kc-tab img{height:34px;width:auto;max-width:42px;object-fit:contain;pointer-events:none}
.kc-tabico{display:grid;place-items:center;height:34px;color:#40666a}
.kc-listwrap{display:flex;align-items:center;gap:4px}
.kc-list{flex:1;min-width:0;display:flex;gap:10px;overflow-x:auto;padding:6px 4px 4px;scrollbar-width:none;touch-action:pan-x}
.kc-item{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;width:calc(var(--kc-lcard) + 10px)}
.kc-list .kc-card{width:var(--kc-lcard);height:var(--kc-lcard);border-radius:calc(var(--kc-lcard) * .26)}
.kc-list .kc-note{font-size:calc(var(--kc-lcard) * .38)}
.kc-lbl{max-width:100%;font-size:12px;font-weight:700;line-height:1.15;color:#3f6266;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere}
html[data-profile="kids"] #codeOverlay.kids-cards .kc-arrow{flex:none;display:grid;place-items:center;width:44px;height:56px;min-height:44px;padding:0;border:2px solid #cfe0d6;border-radius:14px;background:#f3f8f2;color:#3f6a66;cursor:pointer}
html[data-profile="kids"] #codeOverlay.kids-cards .kc-arrow:not(:disabled):active{background:#dff1ea!important;color:#1f4a50!important}

/* running: only highlight and stop stay live */
.kids-cards.kc-running .kc-tray{opacity:.5}
.kids-cards.kc-running :is(.kc-repeat,#edClear,#progExSel){opacity:.5}

/* small cells: a smaller badge (still a 46px touch area) */
html[data-profile="kids"] #codeOverlay.kids-cards.kc-compact .kc-val{min-width:24px;min-height:24px;height:24px;padding:0 5px;font-size:12px;right:-5px;bottom:-5px}
.kids-cards.kc-compact .kc-val::after{inset:-11px}
.kids-cards.kc-compact .kc-tag{left:3px;top:3px}

@media(max-width:900px) and (max-height:820px){
    html[data-profile="kids"] #codeOverlay.kids-cards .code-panel-header{min-height:52px;padding:4px 10px}
    html[data-profile="kids"] #codeOverlay.kids-cards :is(.code-panel-header .ed-view-tools button,.code-panel-header .code-panel-close,.code-prog-header .mini-btn,.code-prog-header .prog-ex-sel){min-height:44px;height:44px}
    html[data-profile="kids"] #codeOverlay.kids-cards #progList.kc-stage{padding:8px}
    .kc-tray{padding:6px}
    .kc-tab{min-height:46px;min-width:52px}
    .kc-tab img{height:28px}
    .kc-tab>span:last-child{display:none}
    .kc-tabico svg{width:26px;height:26px}
    .kc-tabico{height:28px}
    .kc-bar{min-height:42px}
    .kc-lbl{font-size:11px}
    html[data-profile="kids"] #codeOverlay.kids-cards .prog-output{display:none}
}

/* narrow but not phone-sized windows: a slimmer 3D strip gives the card tray room (Focus view still takes the full height) */
@media(min-width:601px) and (max-width:900px) and (max-height:820px){
    html.kids-cards-on[data-profile="kids"] .app.code-active{grid-template-rows:76px 116px minmax(0,1fr)}
    html.kids-cards-on[data-profile="kids"] .app.code-active #sc{height:116px}
    html.kids-cards-on[data-profile="kids"] body:not(.editor-focus) #codeOverlay,html.kids-cards-on[data-profile="kids"] body:not(.editor-focus) #codeOverlay.running{top:192px}
}
/* small cells: a slimmer run pack keeps the stage as short as the board */
html[data-profile="kids"] #codeOverlay.kids-cards.kc-compact .kc-stage[data-layout="side"] .kc-runpack{width:80px;gap:8px}
html[data-profile="kids"] #codeOverlay.kids-cards.kc-compact .kc-stage[data-layout="side"] :is(#runBtn,#stopProgBtn){width:76px;height:76px;min-height:76px}
html[data-profile="kids"] #codeOverlay.kids-cards.kc-compact .kc-stage[data-layout="side"] .kc-repeat{width:46px;height:46px;min-height:46px}
html[data-profile="kids"] #codeOverlay.kids-cards.kc-compact .kc-stage[data-layout="side"] .kc-runico svg.ico{width:30px;height:30px}
@media(max-height:760px){
    .kc-tab{min-height:54px}
    .kc-tab img{height:28px}
    .kc-bar{min-height:48px}
}
@media(prefers-reduced-motion:reduce){
    .kc-cell.kc-next,.kc-board.kc-shake,.kc-pop .kc-face{animation:none}
    html[data-profile="kids"] #codeOverlay.kids-cards .kc-repeat.kc-flash{animation:none!important}
}