/* Uploaded material covers and their editor. Presets retain their own artwork. */
.card-visual.custom-cover-art { isolation:isolate; overflow:hidden; }
.custom-cover-art::before, .custom-cover-art::after { display:none!important; }
.custom-cover-art .custom-cover-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:1; transform:none; }
.custom-cover-art.video-art > .icon { position:relative; z-index:3; color:#fff; filter:drop-shadow(0 2px 8px #0008); }
.material-cover:has(.custom-cover-art)::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(180deg,#0004,transparent 40%,#0009); }
.material-cover:has(.custom-cover-art) .cover-type,
.material-cover:has(.custom-cover-art) .cover-caption { color:#fff; z-index:3; text-shadow:0 1px 7px #000b; }
.material-cover:has(.custom-cover-art) .cover-type { background:#111a; border-color:#fff3; backdrop-filter:blur(6px); }
.article-hero-art:has(.custom-cover-art) { padding:0; overflow:hidden; }
.article-hero-art .custom-cover-art { width:100%; height:100%; transform:none!important; }
.table-cover .custom-cover-art { width:100%; height:100%; }

.material-cover-editor { min-width:0; margin-top:6px; padding-top:22px; border-top:1px solid var(--line); color:var(--ink); }
.material-cover-editor .cover-editor-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; margin-bottom:12px; }
.material-cover-editor .cover-editor-heading h3 { margin:0; font-size:16px; font-weight:650; line-height:1.4; color:var(--ink); }
.material-cover-editor .cover-editor-heading > span { font-size:12px; line-height:1.5; color:var(--muted); }
.material-cover-editor .cover-editor-preview { position:relative; overflow:hidden; width:100%; aspect-ratio:16/10; border:1px solid var(--line); border-radius:8px; background:var(--paper); margin-bottom:14px; }
.material-cover-editor .cover-editor-preview .card-visual { position:absolute; inset:0; width:100%; height:100%; min-height:0; border-radius:0; }
.material-cover-editor .cover-preview-label { position:absolute; z-index:4; top:10px; left:10px; padding:4px 8px; border:1px solid #fff3; border-radius:4px; color:#fff; background:#111b; font-size:11px; line-height:1.45; }
.material-cover-editor .cover-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(44px,1fr)); gap:8px; margin:0 0 12px; }
.material-cover-editor .cover-choice { position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-width:0; height:46px; min-height:44px; border-radius:6px; border:1px solid var(--line); cursor:pointer; }
.material-cover-editor .cover-choice.active { outline:2px solid var(--blue); outline-offset:2px; }
.material-cover-editor .cover-choice > .icon { z-index:2; width:20px; height:20px; color:#fff; background:#111b; border-radius:50%; padding:3px; filter:none; }
.material-cover-editor .cover-custom-toggle { display:flex; align-items:center; gap:10px; min-height:44px; font-size:14px; line-height:1.5; font-weight:500; cursor:pointer; color:var(--ink); }
.material-cover-editor .cover-custom-toggle input { flex:0 0 19px; appearance:auto; width:19px; height:19px; min-height:0; margin:0; padding:0; accent-color:var(--blue); }
.material-cover-editor .cover-custom-toggle:has(input:disabled) { color:var(--muted); cursor:default; }
.material-cover-editor .cover-file-info { display:grid; min-width:0; gap:3px; padding:10px 12px; margin:4px 0 10px; border:1px solid var(--line); border-radius:6px; background:var(--paper); }
.material-cover-editor .cover-file-info > span { overflow-wrap:anywhere; font-size:13px; font-weight:550; line-height:1.5; color:var(--ink); }
.material-cover-editor .cover-file-info > small { font-size:12px; line-height:1.5; color:var(--muted); }
.material-cover-editor .cover-editor-actions { display:flex; flex-direction:column; align-items:stretch; gap:3px; }
.material-cover-editor .cover-editor-actions .button { min-height:44px; width:100%; padding:10px 12px; font-size:13px; white-space:normal; text-align:center; }
.material-cover-editor .cover-remove-button { display:flex; justify-content:center; align-items:center; gap:8px; min-height:44px; padding:8px; border:0; border-radius:5px; color:var(--muted); background:transparent; font:inherit; font-size:12px; cursor:pointer; }
.material-cover-editor .cover-remove-button:hover { color:var(--ink); background:var(--paper); }
.material-cover-editor .cover-editor-help { margin:9px 0 0; font-size:12px; line-height:1.65; color:var(--muted); }
.material-cover-editor .cover-remove-notice { margin:10px 0 0; padding:10px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:var(--paper); font-size:12px; line-height:1.6; }
.material-cover-editor .cover-remove-notice button { display:block; min-height:44px; padding:5px 0; border:0; background:transparent; color:var(--blue); font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.material-cover-editor .cover-editor-error { color:var(--theme-danger,#d88e7c); font-size:12px; line-height:1.6; margin:10px 0 0; overflow-wrap:anywhere; }
.material-cover-editor .cover-editor-error:empty { display:none; }
.material-cover-editor button:focus-visible,
.material-cover-editor input:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
@media(max-width:600px) {
  .material-cover-editor { margin-top:0; }
  .material-cover-editor .cover-editor-preview { aspect-ratio:16/9; }
  .material-cover-editor .cover-choice { height:48px; }
  .material-cover-editor .cover-editor-actions .button { font-size:14px; }
}