/* bl-card-media.css - pictures, maths, music and code on flashcards, the card list editor, the Add menu and the Share
   sheet (assets/js/bl-card-media.js). House tokens only; light and dark follow them. 44 px targets throughout. */
@font-face{font-family:"BL Music Glyph";src:url(/assets/music/vendor/fonts/bravura/bl-music-symbols.woff2) format("woff2");unicode-range:U+E1D0-E1E7;font-display:block}

.cm-ic{width:22px;height:22px;flex:none}
.cm-ic-music{display:inline-flex;align-items:center;justify-content:center;font:28px/1 "BL Music Glyph";height:22px;width:22px;padding-top:8px}

/* ---- items on a face (study, review, the editor's preview) ---- */
.cm-item{display:flex;align-items:center;justify-content:center;max-width:100%}
.cm-img img{display:block;max-width:100%;max-height:min(40svh,320px);width:auto;height:auto;border-radius:12px;object-fit:contain}
.cm-wait{flex-direction:column;gap:6px;min-height:120px;width:min(100%,280px);border-radius:12px;background:rgba(var(--ink-rgb),.06);color:var(--muted);font-size:14px;font-weight:600}
.cm-wait .cm-ic{width:30px;height:30px}
.cm-busy{min-height:120px;width:min(100%,240px);border-radius:12px;background:linear-gradient(90deg,rgba(var(--ink-rgb),.05),rgba(var(--ink-rgb),.12),rgba(var(--ink-rgb),.05));background-size:200% 100%;animation:cm-shim 1.1s linear infinite}
@keyframes cm-shim{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.cm-busy{animation:none}}
.cm-tex{font:600 1.05em/1.5 var(--f-display);font-variant-numeric:tabular-nums}
.cm-tex sup,.cm-tex sub{font-size:.68em;line-height:0}
.cm-root{white-space:nowrap}
.cm-rad{border-top:2px solid currentColor;padding:0 2px;margin-left:1px}
.cm-pre{margin:0;max-width:100%;overflow:auto;text-align:left;padding:12px 14px;border-radius:12px;background:rgba(var(--ink-rgb),.06);font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;tab-size:4}
.cm-pre code{font:inherit}
.cm-k{color:var(--study-ink);font-weight:700}
.cm-s{color:#8a5a00}
:root[data-theme="dark"] .cm-s{color:#ffd166}
.cm-n{color:#5b4bb7}
:root[data-theme="dark"] .cm-n{color:#b9adff}
.cm-c{color:var(--muted);font-style:italic}
.cm-abc{width:fit-content;max-width:100%;overflow-x:auto}   /* the engraving's own width, at the lesson size notation.js sets */
/* the stave takes the card's own ink (as the lessons do), never a white slab: notation.js draws black on transparent,
   so dark mode turns the ink light */
.cm-abc.mn-sheet{background:none;border:0;border-radius:0;padding:0;color:inherit}
.cm-abc svg{display:block;max-width:100%;height:auto}
:root[data-theme="dark"] .cm-abc svg{filter:invert(1) hue-rotate(180deg) brightness(.92)}

/* a face that carries an item: the item above the text */
.cm-has{flex-direction:column;gap:12px}
.cm-has .cm-text{font-size:.82em}

/* ---- the list editor: one row per card, front | back | its two actions, all top-aligned on one grid ---- */
.cm-list{display:flex;flex-direction:column}
.cm-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;gap:12px;align-items:start;padding:14px 0;border-bottom:1px solid var(--rule)}
.cm-card:first-child{padding-top:4px}
.cm-face{display:flex;flex-direction:column;gap:8px;min-width:0;border-radius:14px;transition:box-shadow .15s}
.cm-face.cm-drop{box-shadow:0 0 0 3px color-mix(in srgb,var(--study) 45%,transparent)}
/* an item in the editor: a field-like chip the width of its content, Remove in its corner */
.cm-slot{position:relative;align-self:flex-start;max-width:100%;border:2px solid var(--rule-2);border-radius:12px;background:var(--surface);overflow:hidden}
.cm-slot .cm-item{justify-content:flex-start}
.cm-slot-img{border:0;background:none}
.cm-slot-img .cm-img img{max-height:132px;border-radius:12px}
.cm-slot-tex{padding-block:10px;padding-inline:12px 48px}
.cm-slot-code .cm-pre{border-radius:0;max-height:140px;padding-right:48px}
[dir="rtl"] .cm-slot-code .cm-pre{padding-right:14px;padding-left:48px}
.cm-slot-abc{padding-block:6px;padding-inline:10px 44px}   /* like the maths chip: the stave plus its padding */
.cm-rm{position:absolute;top:4px;inset-inline-end:4px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:10px;background:rgba(10,20,35,.55);color:#fff;cursor:pointer}
.cm-slot-tex .cm-rm,.cm-slot-code .cm-rm,.cm-slot-abc .cm-rm{background:rgba(var(--ink-rgb),.08);color:var(--text)}
.cm-rm .cm-ic{width:18px;height:18px}
.cm-rm::after{content:"";position:absolute;inset:-4px}   /* a 44 px target */
.cm-in{width:100%;min-width:0;min-height:44px;resize:none;padding:10px 12px;border:2px solid var(--rule-2);border-radius:12px;background:var(--surface);color:var(--text);font:16px/1.4 inherit;font-family:inherit}
.editor textarea.cm-in{min-height:44px;font-family:inherit;font-size:16px}
.editor textarea.cm-mono,.cm-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;min-height:120px}
.cm-in:focus{outline:none;border-color:var(--study);box-shadow:0 0 0 4px color-mix(in srgb,var(--study) 20%,transparent)}
.cm-acts{display:flex;flex-direction:column;gap:4px}
.cm-add,.cm-del{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:none;color:var(--muted);cursor:pointer}
.cm-add{color:var(--study-ink)}
.cm-add:hover{background:var(--study-tint)}
.cm-del:hover{color:var(--text);background:rgba(var(--ink-rgb),.06)}
/* on a pointer: the actions show on the row's hover or focus; on touch and narrow screens they are always there */
@media (hover:hover) and (min-width:561px){
  .cm-acts{opacity:0;transition:opacity .15s}
  .cm-card:hover .cm-acts,.cm-card:focus-within .cm-acts{opacity:1}
}
.cm-add:focus-visible,.cm-del:focus-visible,.cm-opt:focus-visible,.cm-rm:focus-visible,.cm-x:focus-visible,.cm-reason:focus-visible,.cm-seg button:focus-visible{outline:3px solid var(--study);outline-offset:2px}
.cm-foot{display:flex;justify-content:flex-start;padding-top:14px}
.cm-new{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.cm-new .cm-ic{width:20px;height:20px}
@media (max-width:560px){
  .cm-card{grid-template-columns:minmax(0,1fr) 44px;row-gap:8px}
  .cm-card .cm-face[data-face="am"]{grid-column:1;grid-row:2}
  .cm-card .cm-acts{grid-column:2;grid-row:1 / span 2}
}

/* ---- sheets: the Add menu, maths, music, code, share, report, sign-in ---- */
.cm-sheet{width:min(440px,calc(100vw - 32px));max-height:min(86svh,640px);padding:0;border:0;border-radius:20px;background:var(--surface);color:var(--text);box-shadow:0 18px 60px rgba(0,0,0,.28)}
.cm-sheet::backdrop{background:rgba(10,20,35,.45)}
.cm-sheet-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 10px 4px 20px}
.cm-sheet-h h2{margin:0;font:700 19px/1.3 var(--f-display)}
.cm-x{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:none;color:var(--muted);cursor:pointer}
.cm-sheet-b{display:flex;flex-direction:column;gap:12px;padding:8px 20px 20px}
@media (max-width:560px){
  .cm-sheet{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
}
.cm-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.cm-grid > *{flex:1 1 0;min-width:0}
@media (min-width:561px){.cm-menu{width:min(600px,calc(100vw - 32px))}}
.cm-menu .cm-grid{flex-wrap:nowrap}
@media (max-width:560px){
  .cm-menu .cm-grid{flex-wrap:wrap}
  .cm-menu .cm-grid > *{flex:0 0 calc((100% - 20px) / 3)}   /* 3 + 2, the last row centred */
}
.cm-aud > *{flex:0 1 160px}
.cm-seg{display:inline-flex;align-self:flex-start;gap:4px;padding:4px;border-radius:14px;background:rgba(var(--ink-rgb),.06)}
.cm-seg button{min-height:40px;min-width:72px;padding:0 14px;border:0;border-radius:10px;background:none;color:var(--muted);font:700 14px/1 inherit;font-family:inherit;cursor:pointer}
.cm-seg button[aria-checked=true]{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.cm-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:88px;padding:12px 8px;border:2px solid var(--rule);border-radius:16px;background:var(--surface);color:var(--text);font:700 14px/1.2 inherit;font-family:inherit;cursor:pointer;text-align:center}
.cm-opt:hover{border-color:var(--study);background:var(--study-tint);color:var(--study-ink)}
.cm-opt .cm-ic{width:28px;height:28px;color:var(--study-ink)}
.cm-opt .cm-ic-music{font-size:34px;height:28px;width:28px;padding-top:12px}
.cm-hint{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
.cm-p{margin:0;color:var(--text-2,var(--muted));line-height:1.5}
.cm-wide{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;text-decoration:none}
.cm-sel{min-height:44px;padding:0 12px;border:2px solid var(--rule-2);border-radius:12px;background:var(--surface);color:var(--text);font:16px inherit;font-family:inherit;align-self:flex-start}
.cm-prev{display:flex;justify-content:center;min-height:56px;padding:12px;border-radius:14px;background:rgba(var(--ink-rgb),.04)}
.cm-prev:empty{display:none}
.cm-sign-art{display:flex;justify-content:center;padding:6px 0}
.cm-sign-art .cm-ic{width:64px;height:64px;color:var(--study);stroke-width:1.6}
.cm-live{display:flex;flex-direction:column}
.cm-live:empty{display:none}
.cm-sh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:52px;padding:6px 0;border-top:1px solid var(--rule)}
.cm-sh .cm-ic{color:var(--study-ink)}
.cm-sh-w{flex:1 1 150px;min-width:0;font-weight:600}
.cm-sh .btn{min-height:44px}
.cm-reasons{display:flex;flex-direction:column;gap:8px}
.cm-reason{min-height:48px;padding:10px 14px;border:2px solid var(--rule);border-radius:14px;background:var(--surface);color:var(--text);font:600 15px/1.3 inherit;font-family:inherit;text-align:left;cursor:pointer}
.cm-reason[aria-pressed="true"]{border-color:var(--study);background:var(--study-tint);color:var(--study-ink)}

/* ---- shared with you, and the shared view ---- */
.cm-inbox-h{margin:18px 0 10px;font:700 16px/1.3 var(--f-display)}
.cm-inbox{display:flex;flex-wrap:wrap;gap:10px}
.cm-chip{display:flex;flex-direction:column;justify-content:center;min-height:56px;padding:8px 14px;border-radius:14px;background:var(--study-tint);color:var(--study-ink);text-decoration:none}
.cm-chip b{font-weight:700}
.cm-chip span{font-size:13px;opacity:.85}
.cm-opt[hidden],.cm-sheet [hidden]{display:none}