/* Media carousel, post page, platform chips and the media list in the post editor.
   Colours come from the app's tokens so light and dark themes both work. */

/* ---------- carousel ---------- */
.car{position:relative;overflow:hidden;background:#0e1d24;color:#fff;aspect-ratio:var(--car-ratio,16/10);border-radius:inherit;outline-offset:-3px;user-select:none;-webkit-user-select:none}
.car-stage{--car-ratio:4/3;border-radius:14px;max-height:68vh}
.car-viewport{position:absolute;inset:0;overflow:hidden;touch-action:pan-y}
.car-track{display:flex;height:100%;transition:transform .28s cubic-bezier(.3,.7,.2,1);will-change:transform}
.car-slide{flex:0 0 100%;min-width:0;height:100%}
.car-open{all:unset;box-sizing:border-box;display:grid;place-items:center;width:100%;height:100%;cursor:pointer;position:relative}
.car-open:focus-visible{outline:3px solid #8bd8d5;outline-offset:-4px}
.car-img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.car-stage .car-img{object-fit:contain}
.car-blank{display:block;width:100%;height:100%;background:linear-gradient(135deg,#1d3944,#0e1d24)}
.car-play{position:absolute;inset-inline-start:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);color:#0b2f3d;display:grid;place-items:center;box-shadow:0 4px 18px rgba(0,0,0,.3)}
[dir=rtl] .car-play{transform:translate(50%,-50%)}
.car-stage .car-play{width:68px;height:68px}
.car-file{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:14px;max-width:100%;color:#cfe3e6}
.car-file b{font-size:14px;overflow-wrap:anywhere;max-width:100%}
.car-none{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;position:absolute;inset:0;color:var(--muted,#6f818a);background:var(--surface-3,#edf3f4);border:2px dashed var(--line,#dfe9eb);border-radius:inherit}
.car-empty{background:transparent}
.car-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#0b2f3d;box-shadow:0 2px 10px rgba(0,0,0,.3);opacity:0;transition:opacity .15s;z-index:2}
.car-nav[hidden]{display:none}
.car-prev{inset-inline-start:8px}.car-next{inset-inline-end:8px}
.car:hover .car-nav,.car:focus-within .car-nav{opacity:1}
@media(hover:none){.car-nav{opacity:.92}}
.car-nav:focus-visible{opacity:1;outline:3px solid #8bd8d5;outline-offset:2px}
.car-count{position:absolute;top:10px;inset-inline-end:10px;z-index:2;min-width:38px;text-align:center;padding:3px 10px;border-radius:99px;background:rgba(11,29,36,.72);color:#fff;font-size:13px;font-weight:700;letter-spacing:.02em;pointer-events:none;font-variant-numeric:tabular-nums}
.car-dots{position:absolute;bottom:9px;inset-inline:0;display:flex;justify-content:center;gap:5px;z-index:2;pointer-events:none}
.car-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);transition:background .15s,transform .15s}
.car-dots i.on{background:#fff;transform:scale(1.25)}
@media(prefers-reduced-motion:reduce){.car-track{transition:none}.car-nav{transition:none}}

/* ---------- post page ---------- */
.review-backdrop.page-mode{padding:0;align-items:stretch}
.review-dialog.rv-page{width:min(1320px,100%);max-height:100vh;height:100vh;border-radius:0;display:flex;flex-direction:column}
@media(min-width:900px){.review-dialog.rv-page{width:min(1320px,calc(100% - 48px));height:calc(100vh - 32px);margin:16px auto;border-radius:18px}}
.rv-back{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:7px 12px;margin-bottom:6px}
.rv-back:hover{background:var(--surface-2)}
.rv-addr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--text-xs);color:var(--muted);margin-top:2px}
.rv-addr button{border:0;background:none;color:var(--teal-2);padding:0;text-decoration:underline;font-size:inherit}
.plat-chips{display:flex;flex-wrap:wrap;gap:7px}
.plat-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line);border-radius:99px;background:var(--surface);cursor:pointer;font-size:var(--text-control)}
.plat-chip input{position:absolute;opacity:0;pointer-events:none}
.plat-chip.on{background:var(--teal-soft);border-color:var(--teal);color:var(--teal-2);font-weight:600}
.plat-chip:focus-within{outline:3px solid var(--teal-2);outline-offset:2px}
body.dark .plat-chip.on{background:rgba(28,168,167,.22)}
.po-go{display:inline-flex;align-items:center;gap:4px;text-align:start}
.po-go-ic{opacity:.55;flex:none}
.po-go:hover .po-go-ic{opacity:1}

/* ---------- media list in the post editor: order and cover ---------- */
.media-tags.ordered{display:flex;flex-direction:column;gap:8px}
.media-tags.ordered .media-tag{width:100%;gap:8px;align-items:center;padding-inline-end:8px}
.media-tag .mt-num{flex:none;width:24px;height:24px;border-radius:50%;background:var(--surface-3);color:var(--muted);display:grid;place-items:center;font-size:12px;font-weight:700}
.media-tag .mt-tools{display:flex;gap:4px;flex:none;margin-inline-start:auto}
.media-tag .mt-tools button{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;padding:0;color:var(--ink)}
.media-tag .mt-tools button:hover:not(:disabled){background:var(--surface-2)}
.media-tag .mt-tools button:disabled{opacity:.35;cursor:not-allowed}
.media-tag .mt-tools button[aria-pressed=true]{background:var(--teal-soft);border-color:var(--teal);color:var(--teal-2)}
.media-tag.is-cover{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal-soft)}
.media-tag .mt-badge{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:99px;background:var(--teal-soft);color:var(--teal-2);font-size:12px;font-weight:700;margin-inline-start:6px}
.media-tag.dragging{opacity:.5}
.media-tag.drop-before{box-shadow:0 -3px 0 var(--teal)}
.media-tag.drop-after{box-shadow:0 3px 0 var(--teal)}
.media-hint{font-size:var(--text-xs);color:var(--muted);margin:8px 0 0}

/* ---------- notification sound switch ---------- */
.sound-toggle[aria-pressed=true]{color:var(--teal-2)}

/* ---------- calendar table: platform pop-over ---------- */
.plat-pop{position:relative;display:inline-block}
.plat-pop>summary{list-style:none;cursor:pointer;padding:3px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:var(--text-sm);white-space:nowrap}
.plat-pop>summary::-webkit-details-marker{display:none}
.plat-pop[open]>summary{border-color:var(--teal);color:var(--teal-2)}
.plat-pop-list{position:absolute;z-index:20;inset-inline-start:0;top:calc(100% + 4px);min-width:170px;display:grid;gap:4px;padding:8px 10px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(21,59,69,.18)}
.plat-pop-list label{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);cursor:pointer}
.plat-pop-list input{width:auto;min-height:0}

/* ---------- approval / urgency tags ---------- */
.rv-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:var(--text-sm);font-weight:700;white-space:nowrap}
.rv-tag.edit{background:#fff1d6;color:#8a5200}
.rv-tag.edited{background:var(--violet-soft,#ece8ff);color:#5f4fc0}
.rv-tag.urgent{background:#ffe2c7;color:#9a3d00}
.rv-tag.overdue{background:var(--coral-soft);color:#bd1638}
body.dark .rv-tag.edit{background:#4a3818;color:#ffd699}
body.dark .rv-tag.edited{background:#2c2652;color:#cfc6ff}
body.dark .rv-tag.urgent{background:#4d2d17;color:#ffc79e}
body.dark .rv-tag.overdue{background:#482634;color:#ffb3c4}
.rv-check{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:var(--text-sm)}
.rv-check input{width:auto;min-height:0;margin-top:3px}
.rv-actions button:disabled{opacity:.45;cursor:not-allowed}
.rv-page .rv-grid{flex:1}
.rv-page .car-stage{max-height:70vh}
.rv-head .rv-back{display:flex;width:max-content;margin-bottom:8px}