/* Motion 02/03: finite gestures on the existing BRUK component vocabulary. */
.im-login,.im-upload { min-width:0; }
.im-login { border:1px solid var(--border-subtle); border-radius:var(--radius-lg); background:var(--work-panel); overflow:hidden; }
.im-login-head { text-align:center; padding:24px 16px; position:relative; background:radial-gradient(ellipse at top,color-mix(in srgb,var(--accent) 8%,transparent),transparent 75%); }
.im-login h3,.im-upload h3 { margin:8px 0; font-size:18px; }
.im-login-head > .tk-caption { display:block; }
.im-login-head button { margin-top:8px; min-width:112px; }
.im-orbit { position:relative; display:grid; place-items:center; width:52px; height:52px; margin:0 auto 20px; color:var(--accent); border:1px solid var(--metal-gold); border-radius:50%; background:var(--work-surface); }
.im-orbit i { position:absolute; inset:-6px; border:1px solid var(--border-context); border-radius:50%; transform:rotate(-28deg) scaleY(.4); transition:transform var(--motion-normal); }
.im-login.is-open .im-orbit i { transform:rotate(28deg) scaleY(.65); }
.im-orbit b { font-size:24px; }
.im-reveal { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows 480ms var(--motion-transfer-easing),opacity var(--motion-normal); }
.im-reveal > div { min-height:0; overflow:hidden; }
.im-login.is-open .im-reveal { grid-template-rows:1fr; opacity:1; }
.im-login-form { display:grid; gap:16px; padding:4px 20px 20px; }
.im-login-form label { display:grid; gap:8px; font-size:12px; color:var(--muted); }
.im-login-form input { min-width:0; width:100%; }
.im-login-form > * { transform:translateY(12px); opacity:0; transition:transform 360ms var(--motion-transfer-easing),opacity 240ms; }
.im-login.is-open .im-login-form > * { transform:none; opacity:1; }
.im-login.is-open .im-login-form > :nth-child(2) { transition-delay:50ms; }
.im-login.is-open .im-login-form > :nth-child(3) { transition-delay:100ms; }
.im-login-form p { margin:0; }
.im-drop { display:flex; width:100%; align-items:center; justify-content:flex-start; text-align:left; gap:12px; padding:20px 12px; border:1px dashed var(--border-control); background:var(--work-panel); }
.im-drop > span:last-child { display:grid; gap:6px; min-width:0; }
.im-drop strong { font-size:14px; }
.im-drop small { font-size:12px; color:var(--muted); line-height:1.5; }
.im-drop.is-dragging { border-style:solid; border-color:var(--border-emphasis); background:color-mix(in srgb,var(--selection) 10%,var(--work-surface)); box-shadow:var(--metal-gold-shadow); }
.im-drop-icon { position:relative; display:grid; place-items:center; width:44px; height:48px; flex:none; border-radius:var(--radius-sm); background:var(--work-elevated); color:var(--accent); }
.im-drop-icon svg { width:24px; height:24px; transition:transform var(--motion-normal); }
.im-drop-icon > span { position:absolute; right:3px; bottom:0; font-size:20px; }
.im-drop.is-dragging svg { transform:translateY(-6px) rotate(-8deg); }
.im-demo-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:16px; }
.im-demo-actions label { font-size:12px; }
.im-local { line-height:1.6; }
.im-upload-list { list-style:none; padding:0; margin:16px 0; display:grid; gap:8px; }
.im-upload-row { display:flex; gap:8px; align-items:center; padding:10px 8px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--work-panel); min-width:0; }
.im-upload-name { min-width:0; flex:1; display:grid; gap:5px; }
.im-upload-name strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.im-upload-name small { color:var(--muted); font-size:11px; line-height:1.5; }
.im-upload-name progress { width:100%; height:3px; accent-color:var(--accent); }
.im-thumbnail { position:relative; width:38px; height:44px; flex:none; border:1px solid var(--border-control); border-radius:var(--radius-sm); overflow:hidden; color:var(--accent); }
.im-thumbnail > span { position:absolute; inset:0; display:grid; place-items:center; background:var(--work-elevated); }
.im-thumbnail > span:first-child { filter:grayscale(1); opacity:.4; }
.im-thumbnail .im-thumbnail-reveal { clip-path:inset(calc(100% - var(--im-progress,0%)) 0 0); transition:clip-path var(--motion-fast) linear; }
.im-thumbnail svg { width:24px; height:28px; }
.im-thumbnail img { width:100%; height:100%; object-fit:cover; }
.im-row-action { min-width:44px; min-height:44px; padding:4px; flex:none; font-size:18px; }
.im-upload-row[data-state="done"] .im-thumbnail { border-color:var(--positive); }
.im-upload-row[data-state="done"] small { color:var(--positive); }
.im-upload-row[data-state="error"] { border-color:var(--negative); }
.im-upload-row[data-state="error"] small { color:var(--negative); }
.im-upload-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--border-subtle); padding-top:12px; }
.im-upload-footer p { margin:0; overflow-wrap:anywhere; }
.im-login :focus-visible,.im-upload :focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
.im-reduced * { transition:none!important; animation:none!important; }
@media(prefers-reduced-motion:reduce) { .im-login *,.im-upload * { transition:none!important; animation:none!important; } }
@media(max-width:480px) { .im-login-form { padding:4px 12px 16px; } .im-upload-row { flex-wrap:wrap; } .im-upload-name { min-width:80px; } }

.im-upload [hidden] { display:none!important; }
.im-upload-errors { color:var(--negative); overflow-wrap:anywhere; }