/* "Yours to own" demo: a custom domain connects, users and data are marked as yours, then the
   code and database are exported. Phases (domain, owned, hover, click, exporting, done) come
   from feature-motion.js. Every element is laid out from the start so the panel never resizes. */
.yo{align-items:center;font-size:14px;line-height:20px;color:#3d433a}
.yo-window{width:min(460px,100%);background:#fff;border:1px solid #e3e6df;border-radius:16px;box-shadow:0 8px 24px #2834200a;overflow:hidden}
.yo-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid #eef0ec;background:#fafbf9;font-size:13px}
.yo-bar b{font-weight:600;color:#242823}
.yo-logo{width:16px;height:16px;border-radius:5px;background:#bb9bed;box-shadow:-2px -2px 0 #e5d6fc}
.yo-crumb{color:#9a9e96}.yo-crumb:before{content:'/';margin-right:8px;color:#d3d6cf}

/* Ownership rows. */
.yo-rows{padding:4px 16px}
.yo-row{display:grid;grid-template-columns:28px 64px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f3f4f1}
.yo-row:last-child{border-bottom:0}
.yo-ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 22%,#fff);color:color-mix(in srgb,var(--c) 60%,#242823)}
.yo-ico svg,.yo-file-state svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.yo-label{font-weight:500;color:#242823}
.yo-value{color:#72746f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yo-field{min-width:0;padding:4px 9px;border:1px solid #e3e6df;border-radius:8px;color:#242823;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color .3s,box-shadow .3s}
.motion-own[data-phase=domain] .yo-field{border-color:#bb9bed;box-shadow:0 0 0 3px #bb9bed2b}
.motion-own[data-phase=domain] .yo-typed{animation:yo-type .9s .15s steps(17,end) both}
.motion-own[data-phase=domain] .yo-field:after{content:'';display:inline-block;width:1.5px;height:14px;margin-left:1px;vertical-align:-2px;background:#242823;animation:yo-caret .5s steps(1) infinite}

.yo-badge{grid-column:4;grid-row:1;justify-self:end;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap;transition:opacity .3s,transform .3s}
.yo-badge-wait{background:#f1f3ef;color:#8a8f86;opacity:0}
.yo-badge-ok{background:#e4f2e6;color:#4f7c53}
.motion-own[data-phase=domain] .yo-badge-ok{opacity:0;transform:scale(.85)}
.motion-own[data-phase=domain] .yo-badge-wait{animation:yo-show .2s 1.1s both}
.yo-badge-own{background:#f2edfb;color:#6a4fa0}
.motion-own[data-phase=domain] .yo-badge-own{opacity:0;transform:scale(.85)}
.motion-own[data-phase=owned] .yo-badge-own{animation:yo-pop .35s calc(var(--i)*.3s + .1s) both}
.motion-own[data-phase=owned] .yo-owned{animation:yo-glow 1s calc(var(--i)*.3s) both}

/* Export block. */
.yo-export{padding:12px 16px 14px;border-top:1px solid #eef0ec;background:#fcfcfb}
.yo-export-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.yo-export-head b{display:block;font-weight:600;color:#242823}
.yo-export-head span:not(.yo-button){font-size:12px;color:#8a8f86}
.yo-button{position:relative;display:inline-flex;align-items:center;padding:6px 14px;border-radius:9px;background:#242823;color:#fff;font-size:13px;font-weight:500;transition:transform .12s,background .2s}
.motion-own[data-phase=hover] .yo-button{background:#3a4037}
.motion-own[data-phase=click] .yo-button{transform:scale(.93);background:#3a4037}
.yo-cursor{position:absolute;left:58%;top:58%;width:18px;height:21px;opacity:0;transform:translate(90px,70px);transition:transform .7s cubic-bezier(.3,.7,.3,1),opacity .3s}
.motion-own:is([data-phase=hover],[data-phase=click]) .yo-cursor{opacity:1;transform:none}
.motion-own[data-phase=exporting] .yo-cursor{opacity:0;transform:none}

.yo-files{display:grid;gap:7px}
.yo-file{display:grid;grid-template-columns:34px minmax(0,1fr) 54px;align-items:center;gap:10px;padding:7px 10px 7px 7px;border:1px dashed #dfe2db;border-radius:10px;background:#fff;opacity:.45;transition:opacity .3s,border-color .3s}
.motion-own:is([data-phase=exporting],[data-phase=done]) .yo-file{opacity:1;border-style:solid;border-color:#e6e9e3}
.yo-file-ico{height:30px;border-radius:7px;display:grid;place-items:center;background:#f2edfb;color:#6a4fa0;font-size:10px;font-weight:700;letter-spacing:.02em}
.yo-file:nth-child(2) .yo-file-ico{background:#e4f2e6;color:#4f7c53}
.yo-file-name{display:flex;flex-direction:column;min-width:0;font-size:13px;font-weight:500;color:#242823;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yo-file-name small{font-size:11.5px;font-weight:400;color:#8a8f86}
.yo-file-state{position:relative;height:20px;display:flex;align-items:center;justify-content:flex-end}
.yo-progress{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:#eef0ec;overflow:hidden;opacity:0}
.yo-progress:after{content:'';position:absolute;inset:0;background:#bb9bed;transform:scaleX(0);transform-origin:left}
.motion-own[data-phase=exporting] .yo-progress{opacity:1}
.motion-own[data-phase=exporting] .yo-progress:after{animation:yo-fill 1s calc(var(--i)*.35s + .1s) ease-in-out both}
.yo-file-state svg{width:20px;height:20px;padding:3px;border-radius:50%;background:#e4f2e6;color:#4f7c53;stroke-width:2.6;opacity:0;transform:scale(.6);transition:opacity .25s,transform .3s cubic-bezier(.2,.9,.3,1.3)}
.motion-own[data-phase=done] .yo-file-state svg{opacity:1;transform:none;transition-delay:calc(var(--i)*.15s)}

@keyframes yo-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes yo-caret{50%{opacity:0}}
@keyframes yo-show{to{opacity:1}}
@keyframes yo-pop{from{opacity:0;transform:scale(.8)}}
@keyframes yo-glow{0%,100%{background:transparent}35%{background:#f7f3fd}}
@keyframes yo-fill{to{transform:scaleX(1)}}

@container feature-demo (max-width:440px){
 .yo{font-size:13px;line-height:18px}
 .yo-rows{padding:2px 12px}
 .yo-row{grid-template-columns:26px minmax(0,1fr) auto;gap:8px;padding:8px 0}
 .yo-row .yo-label{display:none}
 .yo-badge{grid-column:3}
 .yo-ico{width:26px;height:26px}
 .yo-export{padding:10px 12px 12px}
 .yo-export-head span:not(.yo-button){display:none}
 .yo-file{grid-template-columns:30px minmax(0,1fr) 40px;gap:8px}
}