/*
 * KRAMKING FIRST-DAY GUIDE
 * File: styles.alpha22-1.css
 *
 * Purpose: Compatibility styling for the Alpha 22.1 direct-manipulation/WYSIWYG layer. These
 * rules support selection outlines, resize handles, edit-mode chrome, and its auxiliary panels.
 * The native inline Study editor is newer, but this layer still participates in supported flows.
 *
 * Keep selectors aligned with src/alpha22-1-wysiwyg.js and src/alpha22-2-immersive-authoring.js.
 * Read docs/STYLING-AND-DOM-GUIDE.md before changing this file.
 */

:root {
  --alpha221-design-ratio: 1.6;
  --alpha221-panel-width: clamp(17rem, 21vw, 22rem);
  --alpha221-filmstrip-height: 8.8rem;
  --alpha221-accent: var(--accent, #8c83ff);
  --alpha221-border: color-mix(in srgb, currentColor 18%, transparent);
}
.alpha221-mode-badge { position: fixed; top: .55rem; left: 50%; z-index: 1003; translate: -50% 0; padding: .32rem .68rem; border: 1px solid var(--alpha221-border); border-radius: 999px; background: color-mix(in srgb, var(--surface,#111827) 93%, transparent); font-size: .72rem; font-weight: 800; letter-spacing: .08em; pointer-events:none; }
html[data-kramking-mode="edit"] .alpha221-mode-badge { color: var(--alpha221-accent); }
.alpha221-editing [data-kramking-canonical-card], .alpha221-editing [data-card-surface], .alpha221-editing .study-card__surface { overflow: hidden; position: relative; container-type: inline-size; }
.alpha221-editing [data-card-element], .alpha221-editing [data-layout-element-id] { touch-action: none; }
.alpha221-editing [data-card-element]:hover, .alpha221-editing [data-layout-element-id]:hover { outline: 1px dashed color-mix(in srgb,var(--alpha221-accent) 70%,transparent); outline-offset: 3px; }
.alpha221-selected-element { position: absolute !important; left: calc(var(--layout-x,0) * 1%); top: calc(var(--layout-y,0) * 1%); width: calc(var(--layout-width,50) * 1%); height: calc(var(--layout-height,20) * 1%); max-width:none !important; max-height:none !important; outline:2px solid var(--alpha221-accent)!important; outline-offset:3px; cursor:move; z-index:30!important; }
.alpha221-selected-element[data-card-element="text"] { cursor:text; }
.alpha221-resize-handle { position:absolute; z-index:50; width:.8rem; height:.8rem; padding:0; border:2px solid var(--alpha221-accent); border-radius:50%; background:var(--surface,#111827); }
.alpha221-resize-nw{left:-.5rem;top:-.5rem;cursor:nwse-resize}.alpha221-resize-ne{right:-.5rem;top:-.5rem;cursor:nesw-resize}.alpha221-resize-sw{left:-.5rem;bottom:-.5rem;cursor:nesw-resize}.alpha221-resize-se{right:-.5rem;bottom:-.5rem;cursor:nwse-resize}
.alpha221-options-panel { position:fixed; z-index:1002; top:4.3rem; right:1rem; bottom:calc(var(--alpha221-filmstrip-height) + 1.4rem); width:var(--alpha221-panel-width); display:grid; grid-template-rows:auto auto 1fr auto; gap:.8rem; padding:.9rem; overflow:auto; border:1px solid var(--alpha221-border); border-radius:1rem; background:color-mix(in srgb,var(--surface,#111827) 97%,transparent); box-shadow:0 1rem 3rem #0007; }
.alpha221-panel-header,.alpha221-panel-footer,.alpha221-context-actions{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.alpha221-panel-header button{font-size:1.3rem}.alpha221-insert-tools{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}.alpha221-insert-tools button,.alpha221-panel-footer button,.alpha221-context-actions button{min-height:2.25rem;white-space:normal}.alpha221-context-row{display:flex;flex-wrap:wrap;gap:.35rem}.alpha221-context-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.alpha221-context-grid label{display:grid;gap:.2rem;font-size:.75rem}.alpha221-context-grid input{width:100%}.alpha221-tools-collapsed .alpha221-options-panel{translate:calc(100% + 2rem) 0}.alpha221-tools-collapsed .alpha221-options-panel::before{content:"Edit options";position:absolute;right:100%;top:0;writing-mode:vertical-rl;padding:.7rem .4rem;border:1px solid var(--alpha221-border);border-radius:.6rem 0 0 .6rem;background:inherit}
.alpha221-editing main,.alpha221-editing [data-main-content]{padding-right:calc(var(--alpha221-panel-width) + 2rem)!important;padding-bottom:calc(var(--alpha221-filmstrip-height) + 2rem)!important}.alpha221-legacy-card-navigator,.alpha221-legacy-field-panel{display:none!important}
.alpha221-filmstrip { position:fixed; z-index:1001; left:max(.5rem,var(--sidebar-width,0px)); right:.5rem; bottom:.5rem; height:var(--alpha221-filmstrip-height); display:grid; grid-template-columns:auto 1fr auto auto; gap:.45rem; align-items:center; padding:.55rem; border:1px solid var(--alpha221-border); border-radius:1rem; background:color-mix(in srgb,var(--surface,#111827) 97%,transparent); box-shadow:0 -.6rem 2rem #0005; }
.alpha221-filmstrip-track{display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x proximity;padding:.2rem;min-width:0}.alpha221-filmstrip-card{flex:0 0 9.4rem;height:7.2rem;display:grid;grid-template-rows:1fr auto;gap:.15rem;padding:.25rem;border:1px solid var(--alpha221-border);border-radius:.65rem;background:color-mix(in srgb,var(--surface,#111827) 91%,white 4%);scroll-snap-align:center}.alpha221-filmstrip-card.is-current{border:2px solid var(--alpha221-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--alpha221-accent) 25%,transparent)}.alpha221-mini-card{display:grid;place-content:center;gap:.2rem;overflow:hidden;padding:.25rem;border-radius:.4rem;background:var(--card-background,#172033);aspect-ratio:1.6;text-align:center}.alpha221-mini-front{font-size:.62rem;font-weight:700;line-height:1.15}.alpha221-mini-back{font-size:.5rem;opacity:.65;line-height:1.1}.alpha221-mini-number{font-size:.62rem;font-weight:800}.alpha221-filmstrip-arrow,.alpha221-filmstrip-add{height:3rem}.alpha221-filmstrip-add{white-space:normal}
.alpha221-layout-element { position:absolute; left:calc(var(--layout-x,15)*1%); top:calc(var(--layout-y,65)*1%); width:calc(var(--layout-width,70)*1%); height:calc(var(--layout-height,14)*1%); z-index:5; }.alpha221-short-answer,.alpha221-fill-in-the-blank{border:1px solid var(--alpha221-border);border-radius:.6rem;padding:.65rem;background:color-mix(in srgb,var(--surface,#111827) 88%,white 4%);color:inherit}.alpha221-direct-question-text{min-height:4rem;font-size:clamp(1.2rem,2.4vw,2.2rem);font-weight:700;text-align:center;padding:1rem;outline:1px dashed transparent}.alpha221-direct-question-text:focus{outline-color:var(--alpha221-accent)}
.alpha221-quick-edit{width:min(1100px,94vw);height:min(82vh,850px);padding:0;border:1px solid var(--alpha221-border);border-radius:1rem;background:var(--surface,#111827);color:inherit}.alpha221-quick-edit form{height:100%;display:grid;grid-template-rows:auto 1fr auto}.alpha221-quick-edit header,.alpha221-quick-edit footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--alpha221-border)}.alpha221-quick-edit footer{border-top:1px solid var(--alpha221-border);border-bottom:0}.alpha221-quick-edit header div{display:grid}.alpha221-quick-grid{overflow:auto;padding:.7rem}.alpha221-quick-row{display:grid;grid-template-columns:3rem 1fr 1fr;gap:.5rem;align-items:start;margin-bottom:.5rem}.alpha221-quick-row span{padding:.7rem;text-align:center;font-weight:800}.alpha221-quick-row textarea{min-height:4.8rem;resize:vertical}
@media(max-width:900px){:root{--alpha221-panel-width:min(19rem,88vw);--alpha221-filmstrip-height:7.5rem}.alpha221-options-panel{top:auto;left:.5rem;right:.5rem;bottom:calc(var(--alpha221-filmstrip-height) + .8rem);width:auto;max-height:48vh}.alpha221-editing main,.alpha221-editing [data-main-content]{padding-right:0!important}.alpha221-filmstrip{left:.25rem;right:.25rem;grid-template-columns:auto 1fr auto}.alpha221-filmstrip-add{display:none}.alpha221-filmstrip-card{flex-basis:7.5rem;height:6rem}}
@media(max-width:520px){.alpha221-mode-badge{top:.25rem}.alpha221-options-panel{padding:.6rem}.alpha221-insert-tools{grid-template-columns:1fr 1fr}.alpha221-filmstrip-arrow{display:none}.alpha221-filmstrip{grid-template-columns:1fr}.alpha221-filmstrip-card{flex-basis:6.6rem}.alpha221-quick-row{grid-template-columns:2rem 1fr}.alpha221-quick-row textarea:last-child{grid-column:2}}
@media(prefers-reduced-motion:reduce){.alpha221-options-panel{transition:none!important}}

.alpha221-filmstrip-card[draggable="true"]{cursor:grab}.alpha221-filmstrip-card[draggable="true"]:active{cursor:grabbing}.alpha221-canonical-miniature-clone{width:100%!important;height:100%!important;min-height:0!important;transform:none!important;pointer-events:none!important;overflow:hidden!important;border:0!important;box-shadow:none!important}.alpha221-canonical-miniature-clone *{max-width:100%!important;max-height:100%!important}.alpha221-canonical-miniature-clone iframe{display:none!important}