/* Interactive Ledge demo. Uses Ledge's own sage green and warm clay inside the "app". */
#ld-root{--l-acc:#80a88f;--l-clay:#d9ad8c;--l-hud:rgba(22,24,29,.88);--l-line:rgba(255,255,255,.12)}
.ld{position:relative;min-height:600px;border:1px solid var(--line);background:radial-gradient(120% 90% at 20% 0%,#2a2f6b 0,transparent 55%),radial-gradient(90% 80% at 100% 100%,#4a2b6e 0,transparent 55%),#0d1030;overflow:hidden;box-shadow:8px 8px 0 var(--indigo);user-select:none;-webkit-user-select:none}
.ld.dragging,.ld.dragging *{cursor:grabbing!important}
.ld-bar{position:relative;z-index:6;display:flex;justify-content:space-between;align-items:center;height:32px;padding:0 .7rem;background:rgba(10,10,20,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:400 .78rem var(--f-body,inherit);color:#e8e8f0}
.ld-bar-l,.ld-bar-r{display:flex;align-items:center;gap:1rem}
.ld-bar-l span{opacity:.7}
.ld-ledge-btn{display:grid;place-items:center;width:32px;height:26px;border:0;background:transparent;color:#fff;cursor:pointer;border-radius:6px}
.ld-ledge-btn:hover,.ld-ledge-btn:focus-visible{background:rgba(255,255,255,.18)}
.ld-clock{font-family:var(--f-num);font-size:1.1rem}
.ld-desk{position:relative;z-index:1;display:grid;gap:1rem;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);padding:1.2rem}
.ld-win{border:1px solid var(--l-line);background:rgba(20,22,40,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:10px;overflow:hidden;min-height:300px}
.ld-win>header{display:flex;align-items:center;gap:.35rem;padding:.55rem .7rem;border-bottom:1px solid var(--l-line);font:400 .78rem var(--f-body,inherit);color:#cfd2e6}
.ld-win>header i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.ld-win>header i+i{background:#febc2e}.ld-win>header i+i+i{background:#28c840}
.ld-win>header span{margin-left:.6rem}
.ld-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:.4rem;padding:.8rem}
.ld-file{display:grid;justify-items:center;gap:.25rem;padding:.6rem .3rem;border:1px solid transparent;border-radius:8px;background:transparent;color:#e6e8f5;cursor:grab;touch-action:none;font:inherit;min-height:44px}
.ld-file:hover{background:rgba(255,255,255,.06)}
.ld-file.sel{background:color-mix(in srgb,var(--l-acc) 28%,transparent);border-color:var(--l-acc)}
.ld-file:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
.ld-fname{font-size:0.78rem;line-height:1.2;text-align:center;word-break:break-all}
.ld-fsize{font-size:0.78rem;opacity:.55}
.ld-thumb{display:grid;place-items:center;width:52px;height:52px;border-radius:9px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 10px -4px rgba(0,0,0,.6)}
.ld-thumb.doc{background:linear-gradient(160deg,#eef0f6,#c9cde0);color:#23263a}
.ld-thumb.doc b{font:400 0.75rem var(--f-label);letter-spacing:.04em}
.ld-thumb.doc.link{background:linear-gradient(160deg,#c7e0ff,#8db4f5)}
.ld-notes-body{padding:1rem;display:grid;gap:.6rem;align-content:start;color:#e6e8f5;transition:background .2s}
.ld-notes.over{outline:2px dashed var(--l-acc);outline-offset:-4px;background:color-mix(in srgb,var(--l-acc) 14%,rgba(20,22,40,.72))}
.ld-note-line{font:700 1.1rem var(--f-body,inherit);margin:0}.ld-note-dim{margin:0;opacity:.6;font-size:0.88rem}
.ld-drop-empty{margin-top:.6rem;padding:1.6rem 1rem;border:1px dashed var(--l-line);border-radius:8px;text-align:center;opacity:.55;font-size:0.85rem}
.ld-attach{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.ld-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .5rem .3rem .3rem;border-radius:9px;background:rgba(255,255,255,.08);border:1px solid var(--l-line);font-size:0.78rem}
.ld-chip .ld-thumb{width:28px;height:28px;border-radius:6px}.ld-chip .ld-thumb b{font-size:0.78rem}
.ld-chip em{font-style:normal}
.ld-chip button{border:0;background:transparent;color:#fff;opacity:.55;cursor:pointer;min-width:24px;min-height:24px}
.ld-hint{position:absolute;z-index:5;left:1.2rem;right:1.2rem;bottom:.9rem;margin:0;font:400 0.75rem/1.5 var(--f-label);letter-spacing:.05em;text-transform:uppercase;color:var(--l-clay)}
.ld-layer{position:absolute;inset:0;z-index:8;pointer-events:none}
.ld-layer>*{pointer-events:auto}
.ld-ghost{position:absolute;left:0;top:0;z-index:20;width:56px;height:56px;pointer-events:none;opacity:.92;filter:drop-shadow(0 10px 14px rgba(0,0,0,.5));rotate:-4deg}
.ld-ghost .ld-thumb{width:56px;height:56px}
.ld-ghost b{position:absolute;right:-8px;top:-8px;min-width:22px;height:22px;display:grid;place-items:center;border-radius:11px;background:var(--l-clay);color:#241608;font:700 .72rem var(--f-body,inherit)}

/* shelf (Ledge's HUD) */
.ld-shelf{position:absolute;z-index:9;color:#f1f3fa;background:var(--l-hud);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--l-line);border-radius:20px;box-shadow:0 24px 50px -12px rgba(0,0,0,.7);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .2s,outline-color .2s}
.ld-shelf.fresh{animation:shelfIn .45s cubic-bezier(.2,1.3,.4,1) both}
@keyframes shelfIn{from{opacity:0;transform:scale(.6) translateY(14px)}}
.ld-shelf.compact{width:160px;padding:.7rem}
.ld-shelf.expanded{width:360px;padding:.7rem .7rem .9rem}
.ld-shelf.over{outline:3px solid var(--l-acc);outline-offset:3px;box-shadow:0 0 0 8px color-mix(in srgb,var(--l-acc) 25%,transparent),0 24px 50px -12px rgba(0,0,0,.7)}
.ld-shelf.busy .ld-compact-body,.ld-shelf.busy .ld-items{opacity:.45}
.ld-shelf.docked-left{transform:translateX(calc(-100% + 18px))}
.ld-shelf.docked-right{transform:translateX(calc(100% - 18px))}
.ld-shelf.docked-left.peek,.ld-shelf.docked-right.peek{transform:none}
.ld-x,.ld-dd{position:absolute;top:.5rem;z-index:2;width:28px;height:28px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font:700 .8rem var(--f-body,inherit);cursor:pointer;display:grid;place-items:center}
.ld-x{left:.5rem}.ld-dd{right:.5rem;font-size:1.1rem;line-height:1}
.ld-x:hover,.ld-dd:hover{background:color-mix(in srgb,var(--l-acc) 55%,transparent)}
.ld-compact-body{position:relative;height:110px;display:grid;place-items:center;margin-top:.2rem}
.ld-stack{position:absolute;display:block}
.ld-stack .ld-thumb{width:62px;height:62px}
.ld-stack.s0{transform:translateY(2px);z-index:3}.ld-stack.s1{transform:translate(-9px,-4px) rotate(-8deg);z-index:2;opacity:.9}.ld-stack.s2{transform:translate(9px,-8px) rotate(9deg);z-index:1;opacity:.8}
.ld-empty-ic{font-size:2rem;opacity:.5;color:var(--l-acc)}
.ld-pill{display:block;width:100%;margin-top:.5rem;padding:.4rem .6rem;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font:600 .78rem var(--f-body,inherit);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:32px}
.ld-pill:hover{background:color-mix(in srgb,var(--l-acc) 45%,transparent)}
.ld-exp-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:0 2.6rem 0 2.6rem;min-height:30px;font-size:0.85rem;position:relative}
.ld-exp-head b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld-exp-head button{border:0;background:rgba(255,255,255,.12);color:#fff;border-radius:50%;width:28px;height:28px;cursor:pointer;position:absolute;top:0}
.ld-exp-head button[data-act=collapse]{left:2.2rem}
.ld-exp-head span{position:absolute;right:2.2rem;top:0}
.ld-exp-head span button{position:static}
.ld-exp-head{padding-left:4.4rem;padding-right:4.4rem}
.ld-items{margin-top:.7rem;display:grid;gap:.4rem;max-height:240px;overflow:auto;scrollbar-width:thin}
.ld-items.grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.ld-items.list{grid-template-columns:1fr}
.ld-item{position:relative;display:grid;justify-items:center;gap:.2rem;padding:.55rem .3rem;border:1px solid transparent;border-radius:12px;background:rgba(255,255,255,.05);color:inherit;text-align:center;cursor:grab;touch-action:none;font:inherit}
.ld-item:hover{background:rgba(255,255,255,.1)}
.ld-item.sel{border-color:var(--l-acc);background:color-mix(in srgb,var(--l-acc) 22%,transparent)}
.ld-item .ld-thumb{width:44px;height:44px}
.ld-iname{font-size:0.78rem;line-height:1.15;word-break:break-all}
.ld-imeta{font-size:0.78rem;opacity:.55}
.ld-ix{position:absolute;right:3px;top:3px;display:none;width:20px;height:20px;border:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:0.78rem;cursor:pointer}
.ld-item:hover .ld-ix,.ld-item:focus-within .ld-ix{display:block}
.ld-items.list .ld-item{grid-template-columns:44px 1fr auto;justify-items:start;align-items:center;text-align:left;gap:.7rem}
.ld-item.reveal{cursor:pointer;touch-action:auto}
.ld-empty{grid-column:1/-1;margin:1rem 0;text-align:center;opacity:.55;font-size:0.85rem}

/* menus / dialogs */
.ld-menu{position:absolute;z-index:12;width:224px;padding:.35rem;background:rgba(28,30,38,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--l-line);border-radius:12px;box-shadow:0 20px 40px -10px rgba(0,0,0,.7)}
.ld-menu button{display:flex;justify-content:space-between;align-items:center;gap:.6rem;width:100%;min-height:34px;padding:.3rem .6rem;border:0;border-radius:7px;background:transparent;color:#eef0f8;font:400 .82rem var(--f-body,inherit);text-align:left;cursor:pointer}
.ld-menu button:hover:not(:disabled),.ld-menu button:focus-visible{background:var(--l-acc);color:#10201a}
.ld-menu button:disabled{opacity:.35;cursor:default}
.ld-menu kbd{font:400 0.75rem var(--f-label);opacity:.6;letter-spacing:.02em}
.ld-menu hr{border:0;border-top:1px solid var(--l-line);margin:.25rem .3rem}
.ld-modal{position:absolute;inset:32px 0 0;z-index:14;display:grid;place-items:center;padding:1rem;background:rgba(5,6,15,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.ld-dlg{width:min(100%,380px);max-height:100%;overflow:auto;padding:1.1rem;border:1px solid var(--l-line);border-radius:16px;background:rgba(26,28,36,.97);color:#eef0f8;display:grid;gap:.8rem}
.ld-dlg.wide{width:min(100%,560px)}
.ld-dlg h3{margin:0;font:400 1.25rem var(--f-head);color:#fff}
.ld-dlg label{display:grid;gap:.3rem;font:400 0.75rem var(--f-label);letter-spacing:.06em;text-transform:uppercase;color:var(--l-clay)}
.ld-dlg select,.ld-dlg input[type=text],.ld-dlg input:not([type]){min-height:40px;padding:.4rem .6rem;border:1px solid var(--l-line);border-radius:8px;background:rgba(255,255,255,.07);color:#fff;font:400 .9rem var(--f-body,inherit);text-transform:none;letter-spacing:0}
.ld-dlg select option{color:#111}
.ld-dlg input[type=range]{width:100%;accent-color:var(--l-acc)}
.ld-dlg label.ck{display:flex;align-items:center;gap:.5rem;text-transform:none;font:400 .85rem var(--f-body,inherit);letter-spacing:0;color:#e8eaf3}
.ld-dlg label b{color:#fff;margin-left:.4rem}
.ld-prev{list-style:none;margin:0;padding:0;display:grid;gap:.25rem;font-size:0.78rem;max-height:130px;overflow:auto}
.ld-prev li{display:flex;justify-content:space-between;gap:.6rem;padding:.25rem .5rem;border-radius:6px;background:rgba(255,255,255,.05)}
.ld-prev li span{opacity:.55;text-decoration:line-through;overflow:hidden;text-overflow:ellipsis}.ld-prev li b{color:var(--l-acc);font-weight:600}
.ld-dlg-b{display:flex;justify-content:flex-end;gap:.6rem}
.ld-conv-grid{display:grid;gap:.7rem}
.ld-seg{display:inline-flex;border:1px solid var(--l-line);border-radius:9px;overflow:hidden}
.ld-seg button{min-height:38px;padding:0 .9rem;border:0;background:transparent;color:#fff;font:600 .8rem var(--f-body,inherit);cursor:pointer;text-transform:none;letter-spacing:0}
.ld-seg button+button{border-left:1px solid var(--l-line)}
.ld-seg button[aria-pressed=true]{background:var(--l-acc);color:#10201a}
.ld-table{width:100%;border-collapse:collapse;font-size:0.8rem}
.ld-table th{font:400 0.75rem var(--f-label);letter-spacing:.06em;text-transform:uppercase;text-align:left;color:var(--l-clay);padding:.3rem .4rem}
.ld-table td{padding:.35rem .4rem;border-top:1px solid var(--l-line)}
.ld-table td:first-child{display:flex;align-items:center;gap:.5rem}
.ld-table .ld-thumb{width:26px;height:26px;border-radius:6px}
.ld-table .good{color:var(--l-acc);font-weight:700}.ld-table .bad{color:#ff9a8a;font-weight:700}
.ld-fine{margin:0;font:400 0.75rem/1.5 var(--f-label)!important;letter-spacing:.04em;color:rgba(255,255,255,.5);text-transform:uppercase}
.ld-toasts{position:absolute;z-index:30;right:1rem;bottom:2.6rem;display:grid;gap:.4rem;justify-items:end;pointer-events:none}
.ld-toast{max-width:min(320px,80vw);padding:.55rem .8rem;border-radius:10px;background:rgba(26,28,36,.96);border:1px solid var(--l-acc);color:#eef0f8;font-size:0.8rem;box-shadow:0 12px 24px -8px rgba(0,0,0,.6);animation:tin .2s both;transition:opacity .4s,transform .4s}
.ld-toast.out{opacity:0;transform:translateY(6px)}
.ld-controls{display:flex;flex-wrap:wrap;gap:.7rem 1rem;align-items:center;margin-top:1rem}
.ld-keys{margin:0;font:400 0.75rem/1.7 var(--f-label)!important;letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.ld-keys kbd{border:1px solid var(--line);padding:0 .3rem;font:inherit;color:var(--text)}
@media(max-width:700px){
  .ld-desk{grid-template-columns:minmax(0,1fr);padding:.8rem}
  .ld-win{min-height:0}
  .ld-files{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ld{min-height:760px}
  .ld-shelf.expanded{width:min(360px,calc(100% - 16px))}
  .ld-hint{font-size:0.78rem}
}
@media(prefers-reduced-motion:reduce){.ld-shelf.fresh,.ld-toast{animation:none!important;transition:none!important}}