/* QUIZ-WORLD UI kit (qw-ui.js): toasts, modals, ripple, tilt and reveal for the signed-in workspace.
   Colours come from the shared tokens (--ink, --sapphire, --violet, --platinum, --rose); dark mode follows [data-theme="dark"]. */
:root {
  --qu-card: var(--bg); --qu-text: var(--ink, var(--text)); --qu-muted: var(--slate, var(--text)); --qu-line: var(--platinum-3, var(--border));
  --qu-accent: var(--sapphire, var(--accent)); --qu-accent-2: var(--violet, var(--accent)); --qu-shadow: none;
  --qu-ease: cubic-bezier(.22, 1, .36, 1); --qu-spring: cubic-bezier(.34, 1.56, .64, 1);
}
[data-theme="dark"] {
  --qu-card: var(--surface); --qu-text: var(--text); --qu-muted: var(--text-muted); --qu-line: var(--border);
  --qu-accent: var(--accent); --qu-accent-2: var(--accent); --qu-shadow: none;
}
.qi { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.2em; }
html.qu-lock { overflow: hidden; }

/* ---------- toasts ---------- */
.qu-toasts { position: fixed; top: 16px; right: 16px; z-index: 400; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.qu-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius:var(--radius-card); cursor: pointer;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: none;
  font: 600 14px/1.35 Inter, system-ui, sans-serif; animation: qu-toast-in .45s var(--qu-spring) both;
}
.qu-toast .qi { color: var(--qu-accent-2, var(--text-muted)); width: 1.35em; height: 1.35em; }
.qu-toast-success .qi { color: var(--text-muted); }
.qu-toast-error { background: color-mix(in srgb, var(--danger) 12%, var(--bg)); border-color: var(--danger); }
.qu-toast-error .qi { color: var(--danger); }
.qu-toast-leave { opacity: 0; transform: translate3d(0, -10px, 0) scale(.94); transition: opacity .28s ease, transform .28s ease; }
@keyframes qu-toast-in { from { opacity: 0; transform: translate3d(0, -18px, 0) scale(.9); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .qu-toasts { right: 16px; left: 16px; width: auto; top: 10px; } }

/* ---------- modal ---------- */
.qu-modal-back {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: var(--surface);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .24s ease; overflow-y: auto;
}
.qu-modal-back.qu-in { opacity: 1; }
.qu-modal {
  position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; border-radius:var(--radius-card);
  background: var(--qu-card); color: var(--qu-text); border: 1px solid var(--qu-line); box-shadow: var(--qu-shadow);
  transform: translate3d(0, 24px, 0) scale(.96); transition: transform .45s var(--qu-spring);
}
.qu-in .qu-modal { transform: none; }
.qu-modal.qu-sm { width: min(420px, 100%); } .qu-modal.qu-lg { width: min(760px, 100%); } .qu-modal.qu-flush { background: transparent; border: 0; box-shadow: none; }
.qu-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 22px 6px; }
.qu-modal-head h2 { margin: 0; font: 700 1.35rem/1.2 Inter, system-ui, sans-serif; letter-spacing: -.02em; }
.qu-modal-head p { margin: 4px 0 0; color: var(--qu-muted); font-size: .9rem; }
.qu-modal-x { margin-left: auto; width: 40px; height: 40px; min-height: 40px !important; padding: 0 !important; border-radius:50% !important; }
.qu-modal-body { padding: 8px 22px 22px; overflow-y: auto; }
.qu-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.qu-confirm p { margin: 0; color: var(--qu-muted); line-height: 1.55; }
.qu-field { display: grid; gap: 6px; margin-top: 14px; font-weight:600; font-size: .82rem; color: var(--qu-muted); }
.qu-field input, .qu-field select { min-height: 48px; font-size: 16px; font-weight: 600; }
.qu-note { margin: 8px 0 0; font-size: .8rem; color: var(--qu-muted); line-height: 1.5; }
.qu-error { margin: 10px 0 0; color: var(--rose, var(--danger)); font-weight:600; font-size: .88rem; min-height: 1.2em; }
[data-theme="dark"] .qu-error { color: var(--danger); }
@media (max-width: 560px) {
  .qu-modal-back { align-items: end; padding: 0; }
  .qu-modal { border-radius:var(--radius-card) var(--radius-card) 0 0; max-height: 92dvh; width: 100%; transform: translate3d(0, 60px, 0); }
  .qu-modal.qu-sm, .qu-modal.qu-lg { width: 100%; }
}

/* ---------- ripple, tilt, reveal ---------- */
.qfx-host { position: relative; overflow: hidden; isolation: isolate; }
.qfx-ripple { position: absolute; border-radius:50%; pointer-events: none; z-index: 0; background: var(--surface-hover); transform: scale(0); animation: qfx-ripple .65s var(--qu-ease) forwards; }
[data-qfx] :is(.secondary, .qb-secondary, .qb-ghost, .qd-item) .qfx-ripple { background: var(--surface-hover); }
@keyframes qfx-ripple { to { transform: scale(1); opacity: 0; } }
.qfx-tilt { transform: perspective(1000px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .35s var(--qu-ease), box-shadow .35s ease; will-change: transform; position: relative; }
.qfx-tilt::after {
  content: ""; position: absolute; inset: 0; border-radius:inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--text) 6%, transparent), transparent 62%); z-index: 0;
}
.qfx-tilt:hover::after { opacity: 1; }
.qfx-reveal { opacity: 0; transform: translate3d(0, 14px, 0); }
.qfx-reveal.qfx-in { opacity: 1; transform: none; transition: opacity .5s var(--qu-ease) var(--qfx-delay, 0ms), transform .6s var(--qu-ease) var(--qfx-delay, 0ms); }
@media (prefers-reduced-motion: reduce) { .qfx-reveal { opacity: 1; transform: none; } .qfx-ripple { display: none; } }

/* a modal that only frames its content (used for the code-entry deck) */
.qu-modal.qu-flush { width: min(420px, 100%); overflow: visible; }
.qu-modal.qu-flush .qu-modal-head { position: absolute; right: 8px; top: 8px; z-index: 5; padding: 0; }
.qu-modal.qu-flush .qu-modal-x { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
.qu-modal.qu-flush .qu-modal-body { padding: 0; overflow: visible; }
.public-credit { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 14px; border-radius:999px; background: var(--surface-hover); color: var(--ink, var(--text)); font-size: .88rem; }
.public-credit .qi { color: var(--text-muted); width: 18px; height: 18px; } .public-credit a { color: var(--text-muted); font-weight:600; text-decoration: none; } .public-credit a:hover { text-decoration: underline; }
.join-otp-card { overflow: visible; } .join-otp-card .qo { margin-top: 18px; } .join-otp-card .fine-print { margin-inline: auto; }
.join-long { display: grid; gap: 12px; margin-top: 18px; }
.join-page-card .fine-print .text-button { min-height: auto; display: inline; padding: 0; font-size: inherit; font-weight:600; color: var(--text-muted); }
.app-shell .empty > button, .app-shell .empty > .button { margin-top: 16px; }
.app-shell .empty span { display: block; }

/* Share dialog: four plain choices instead of a dropdown */
.share-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 4px 0 16px; }
.share-choice { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; align-items: start; align-content: start; justify-items: start; gap: 4px; text-align: left; padding: 14px 16px; border: 1px solid var(--border-subtle, var(--border)); border-radius:var(--radius-card); background: var(--surface-card, var(--bg)); color: var(--text-primary, var(--text)); cursor: pointer; font: inherit; }
.share-choice b { font-size: .95rem; }
.share-choice span { font-size: .82rem; color: var(--text-muted, var(--text-muted)); line-height: 1.4; }
.share-choice:hover { border-color: var(--brand-primary, var(--border)); }
.share-choice.on { border-color: var(--brand-primary, var(--border)); box-shadow: none; background: var(--brand-soft, var(--surface-hover)); }
.share-toggle { margin: 6px 0 12px; }

/* Quiz library manager (qw-library.js) */
.ql-search input { width: 100%; padding: 12px 14px; border: 1px solid var(--border-subtle, var(--border)); border-radius:var(--radius-input); background: var(--surface-subtle, var(--surface)); font: inherit; color: inherit; }
.ql-bulk { position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--brand-primary, var(--border)); border-radius:var(--radius-card); background: var(--brand-soft, var(--surface-hover)); }
.ql-bulk[hidden] { display: none; }
.ql-bulk label { display: grid; gap: 4px; font-size: .78rem; font-weight:600; }
.ql-bulk select, .ql-bulk input { padding: 8px 10px; border: 1px solid var(--border-subtle, var(--border)); border-radius:var(--radius-input); background: var(--bg); font: inherit; }
.ql-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 0 2px 10px; }
.ql-all { white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; font-weight:600; font-size: .9rem; }
.ql-folder h3 { margin: 18px 0 8px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted, var(--text-muted)); }
.ql-row { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; }
.ql-main { min-width: 0; display: grid; gap: 2px; }
.ql-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ql-main small { color: var(--text-muted, var(--text-muted)); }
.ql-vis-public { background: var(--surface-hover); color: var(--text); }
.ql-vis-login { background: var(--surface); }
.ql-vis-archived { background: var(--surface); color: var(--text-muted); }
.ql-drop { padding: 22px; border: 2px dashed var(--border-subtle, var(--border)); border-radius:var(--radius-card); text-align: center; display: grid; gap: 12px; justify-items: center; margin-bottom: 14px; }
.ql-drop.over { border-color: var(--brand-primary, var(--border)); background: var(--brand-soft, var(--surface-hover)); }
.ql-file { cursor: pointer; }
.ql-title { width: 100%; padding: 6px 8px; border: 1px solid transparent; border-radius:var(--radius-input); background: transparent; font: inherit; font-weight:600; color: inherit; }
.ql-title:focus { border-color: var(--brand-primary, var(--border)); background: var(--bg); outline: 0; }
.ql-save { align-items: end; justify-content: flex-end; }
@media (max-width: 640px) { .ql-row { grid-template-columns: auto minmax(0, 1fr); } .ql-row .pill, .ql-row .list-actions { grid-column: 2; } }

/* Toast action (Undo) */
.qu-toast-action { margin-left: auto; padding: 6px 12px; min-height: 32px; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--accent-text); font-weight: 600; cursor: pointer; }
.qu-toast-action:hover { background: var(--surface-hover); }