/* Mono Library · 3.49.0 — shares tokens with map-long-3.47.5.css + map-learning-3.49.0.css.
   One job: show the saved translations and open one in the Learning Map. */
.mono-library main.lib-main{display:flex;flex-direction:column;gap:24px;padding-top:44px}
.mono-library .nav a{font-size:13px;padding:9px 15px}
.mono-library .nav a.active{background:var(--soft);color:var(--ink);font-weight:600}
.mono-library .account-link{font-size:12px}

/* hero */
.lib-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 32px;flex-wrap:wrap}
.lib-hero>div{min-width:0;max-width:700px}
.lib-hero h1{font-size:clamp(28px,3.4vw,40px);letter-spacing:-1.2px;line-height:1.15;text-wrap:balance}
.lib-intro{margin-top:10px!important;font-size:15px;line-height:1.6;color:var(--muted);max-width:62ch}
.lib-search{display:flex;align-items:center;gap:10px;flex:0 1 320px;min-height:48px;padding:0 16px;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--muted);transition:border-color .24s var(--ease),box-shadow .24s var(--ease)}
.lib-search:focus-within{border-color:color-mix(in srgb,var(--blue) 55%,var(--line));box-shadow:0 0 0 4px var(--blue-bg)}
.lib-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font-size:15px}
.lib-search svg{width:18px;height:18px}

/* review strip (only when something is due) */
.lib-due{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 18px 16px 20px;border-radius:18px;background:var(--orange-bg);color:var(--ink);animation:mono-rise .42s var(--ease) both}
.lib-due[hidden]{display:none}
.lib-due-dot{width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px color-mix(in srgb,var(--orange) 18%,transparent);flex:none}
.lib-due p{flex:1;min-width:0;font-size:15px;font-weight:600}
.lib-due a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:12px;background:var(--orange);color:#fff;font-size:14px;font-weight:650;transition:transform .12s var(--ease),filter .24s}
.lib-due a:hover{transform:translateY(-1px);filter:brightness(1.06)}
body.dark .lib-due a{color:#16211c}

/* toolbar */
.lib-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lib-toolbar[hidden]{display:none}
.lib-count{font-size:13px;color:var(--muted);margin-inline-end:6px;font-variant-numeric:tabular-nums}
.lib-toolbar [data-filter]{min-height:38px;display:inline-flex;align-items:center;gap:7px;padding:0 14px;border-radius:30px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:13px;transition:background-color .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease)}
.lib-toolbar [data-filter] span{color:var(--muted);font-variant-numeric:tabular-nums}
.lib-toolbar [data-filter]:hover{border-color:color-mix(in srgb,var(--ink) 25%,var(--line))}
.lib-toolbar [data-filter][aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.lib-toolbar [data-filter][aria-pressed=true] span{color:inherit;opacity:.7}
.lib-toolbar [data-filter][hidden]{display:none}
.lib-clear{margin-inline-start:auto;min-height:38px;padding:0 12px;border-radius:10px;background:transparent;color:var(--muted);font-size:13px;transition:color .24s var(--ease),background-color .24s var(--ease)}
.lib-clear:hover{color:#a6402a;background:color-mix(in srgb,#a6402a 8%,transparent)}
body.dark .lib-clear:hover{color:#f0a493}
.lib-status,.lib-muted{font-size:14px;color:var(--muted)}

/* cards: the whole card opens the video in the Learning Map */
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,272px),1fr));gap:20px}
.lib-grid[hidden]{display:none}
.lib-card{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease);animation:mono-rise .42s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms)}
.lib-card:hover,.lib-card:focus-within{transform:translateY(-3px);box-shadow:0 18px 40px #20342814,0 2px 6px #2034280a;border-color:color-mix(in srgb,var(--blue) 25%,var(--line))}
body.dark .lib-card:hover,body.dark .lib-card:focus-within{box-shadow:0 18px 40px #00000059}
.lib-thumb{position:relative;aspect-ratio:16/9;max-width:100%;background:linear-gradient(135deg,#2f463c,#1b2926);overflow:hidden}
.lib-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease),filter .6s var(--ease)}
.lib-card:hover .lib-thumb img{transform:scale(1.045);filter:saturate(1.08)}
.lib-play{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#ffffffe6;box-shadow:0 8px 24px #0000004d;opacity:0;transform:scale(.82);transition:opacity .32s var(--ease),transform .32s var(--ease)}
.lib-play::after{content:"";position:absolute;left:21px;top:17px;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent #202824}
.lib-card:hover .lib-play,.lib-card:focus-within .lib-play{opacity:1;transform:none}
.lib-badge{position:absolute;top:12px;inset-inline-start:12px;padding:5px 10px;border-radius:30px;background:var(--orange-bg);color:var(--orange);font-size:12px;font-weight:700}
.lib-duration{position:absolute;bottom:10px;inset-inline-end:10px;padding:3px 7px;border-radius:6px;background:#000000a6;color:#fff;font-size:11px;font-variant-numeric:tabular-nums}
.lib-body{flex:1;display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px}
.lib-card h3{font-size:16px;line-height:1.4;letter-spacing:-.2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lib-open{color:inherit;outline:none}
.lib-open::after{content:"";position:absolute;inset:0;z-index:1;border-radius:20px}
.lib-open:focus-visible::after{outline:3px solid #7e93ed;outline-offset:-3px}
.lib-meta,.lib-counts{font-size:12px;line-height:1.5;color:var(--muted)}
.lib-counts{color:var(--ink);opacity:.85}
.lib-bar{display:flex;height:6px;border-radius:4px;overflow:hidden;background:var(--st-new);margin-top:2px}
.lib-bar span{display:block;height:100%}
.lib-bar [data-status=remembered]{background:var(--st-remembered)}
.lib-bar [data-status=practice]{background:var(--st-practice)}
.lib-action{margin-top:auto!important;padding-top:8px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:650;color:var(--blue)}
.lib-action.is-muted{color:var(--muted);font-weight:500;font-size:13px}
.lib-arrow{transition:transform .32s var(--ease)}
.lib-card:hover .lib-arrow{transform:translateX(4px)}
[dir=rtl] .lib-arrow{transform:scaleX(-1)}
[dir=rtl] .lib-card:hover .lib-arrow{transform:scaleX(-1) translateX(4px)}
.lib-card.is-local .lib-thumb{filter:grayscale(.35)}
.lib-remove{position:absolute;top:10px;inset-inline-end:10px;z-index:2;width:34px;height:34px;border-radius:50%;background:#ffffffe6;box-shadow:0 2px 10px #0000002e;opacity:0;transform:scale(.85);transition:opacity .24s var(--ease),transform .24s var(--ease),background-color .24s}
.lib-remove::before,.lib-remove::after{content:"";position:absolute;left:11px;top:16px;width:12px;height:2px;border-radius:2px;background:#202824;transform:rotate(45deg)}
.lib-remove::after{transform:rotate(-45deg)}
.lib-card:hover .lib-remove,.lib-card:focus-within .lib-remove,.lib-remove:focus-visible{opacity:1;transform:none}
.lib-remove:hover{background:#fff}
@media(hover:none){.lib-remove{opacity:1;transform:none}.lib-play{display:none}}

/* empty */
.lib-empty{padding:52px 28px;border:1.5px dashed var(--line);border-radius:24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.lib-empty[hidden]{display:none}
.lib-empty h2{font-size:22px;letter-spacing:-.4px}
.lib-empty p{color:var(--muted);max-width:56ch}
.lib-empty .button-row{justify-content:center;margin-top:6px}
.lib-empty .btn{min-height:46px;padding:0 20px;font-size:14px}
.lib-empty .btn.primary{background:var(--blue);color:#fff}
body.dark .lib-empty .btn.primary{color:#16211c}

/* footer note */
.lib-note{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--muted);text-align:center;padding-top:8px}
.lib-note a{color:var(--blue);font-weight:600}
.lib-note a:hover{text-decoration:underline;text-underline-offset:3px}

/* dialog */
#libDialog{max-width:440px}
#libDialog h2{font-size:19px;margin-bottom:8px;letter-spacing:-.3px}
#libDialog p{color:var(--muted);font-size:14px;margin-bottom:20px}
#libDialog .button-row{justify-content:flex-end}
.btn.danger{background:#a6402a;color:#fff;border-color:transparent}
.btn.danger:hover:not(:disabled){background:#8f3522}

@media(max-width:700px){
  .mono-library main.lib-main{padding-top:26px;gap:18px}
  .lib-search{flex:1 1 100%}
  .lib-due a{flex:1 1 100%;justify-content:center}
  .lib-clear{margin-inline-start:0}
}
@media(prefers-reduced-motion:reduce){
  .lib-card,.lib-due{animation:none}
  .lib-card,.lib-thumb img,.lib-play,.lib-remove,.lib-arrow{transition:none}
  .lib-card:hover,.lib-card:focus-within,.lib-card:hover .lib-thumb img{transform:none}
}