/*
 * Mobile + motion layer for every page (loaded from partials/doc_head.php, driven by js/motion.js).
 *   1. touch ergonomics      2. page and scroll animation      3. the phone dock + "More" sheet
 *   4. theme button / panel on phones      5. page-specific phone fixes
 * Desktop layouts are not changed: everything that alters a layout sits inside a max-width media query.
 */

/* ── 1. touch ergonomics ─────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, input, select, textarea, label, summary, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px; } /* no zoom-on-focus in iOS */
  .hop-btn { min-height: 42px; } .hop-btn.sm { min-height: 36px; padding-inline: 12px; }
  .hop-input, .hop-select, .hop-textarea { min-height: 44px; font-size: 16px; }
  .hop-tab { min-height: 40px; }
  .hop-table input, .hop-table select { min-height: 38px; }
}

/* ── 2. animation ─────────────────────────────────────────────────────────
 * The living-world dashboard (classic and Sanctuary) has its own rich entrance animation (clouds parting, the
 * camera drifting in, glass panels staggering in) in world.css / sanctuary.css. The soft fade below only smooths
 * its very first paint, and is scoped to it with :has() so inner pages (library, notes, vault, students,
 * workspace, labs, community, duel, the quiz ...) load instantly with no fade, matching how they looked before. */
body:has(#dash-root) #root, body:has(#sc-root) #root { animation: hopFade 0.5s ease both; } /* opacity only: a transform here would trap fixed elements */
@keyframes hopFade { from { opacity: 0; } }

/* scroll reveal (classes are added by motion.js, so nothing is hidden if scripts fail) */
.rv { opacity: 0; translate: 0 22px; scale: 0.985; }
.rv.in { opacity: 1; translate: none; scale: none; transition: opacity 0.65s ease var(--rv-d, 0ms), translate 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) var(--rv-d, 0ms), scale 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) var(--rv-d, 0ms); }

/* press feedback and ripple */
.hop-btn, .hop-tab, .md-tile, .md-btn { position: relative; overflow: hidden; }
.rp { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: 0.22; transform: scale(0); animation: hopRipple 0.6s ease-out forwards; }
@keyframes hopRipple { to { transform: scale(1); opacity: 0; } }
@media (hover: none) {
  .hop-btn, .hop-tab, .hop-card a, .vt-card, .cm-item, .cm-row, .ws-link, .lab-card { transition: scale 0.18s ease, background-color 0.2s, border-color 0.2s; }
  .hop-btn:active, .hop-tab:active, .vt-card:active, .cm-item:active, .ws-link:active, .lab-card:active { scale: 0.975; }
}
@media (hover: hover) { .hop-card, .vt-card { transition: border-color 0.25s, box-shadow 0.25s, translate 0.25s; } .vt-card:hover, .ws-link:hover { translate: 0 -3px; } }

/* loading skeleton */
.hop-skel { position: relative; overflow: hidden; background: rgba(148, 163, 184, 0.1); border-radius: 12px; min-height: 18px; }
.hop-skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.12) 50%, transparent 80%); transform: translateX(-100%); animation: hopSkel 1.3s infinite; }
@keyframes hopSkel { to { transform: translateX(100%); } }

/* ── 3. phone dock + "More" sheet ────────────────────────────────────────── */
.md-dock, .md-sheet { display: none; }
@media (max-width: 899px) {
  nav[aria-label="Main navigation"]:not(.md-dock) { display: none !important; } /* the old 9-icon bar overflowed the screen */
  .md-dock {
    display: flex; position: fixed; z-index: 300; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); width: min(520px, calc(100% - 20px)); height: 64px; padding: 6px; translate: -50% 0;
    border-radius: 24px; background: rgba(11, 17, 29, 0.82); border: 1px solid rgba(255, 255, 255, 0.11); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.09); transition: translate 0.4s cubic-bezier(0.3, 0.9, 0.3, 1), opacity 0.3s; animation: mdRise 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) 0.15s backwards;
  }
  body.md-away .md-dock { translate: -50% 150%; opacity: 0; }
  @keyframes mdRise { from { translate: -50% 160%; opacity: 0; } }
  .md-pill { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 5); border-radius: 18px; pointer-events: none; transform: translateX(calc(var(--i, 0) * 100%));
    transition: transform 0.5s cubic-bezier(0.3, 1.35, 0.5, 1); background: linear-gradient(160deg, rgba(34, 211, 238, 0.24), rgba(201, 168, 76, 0.16)); border: 1px solid rgba(94, 234, 212, 0.38); box-shadow: 0 0 22px rgba(34, 211, 238, 0.22); }
  .md-item { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: #8497b0; text-decoration: none; cursor: pointer;
    font: 600 10.5px/1 'Outfit', system-ui, sans-serif; letter-spacing: 0.02em; transition: color 0.25s; -webkit-tap-highlight-color: transparent; }
  .md-item svg { width: 23px; height: 23px; transition: transform 0.3s; }
  .md-item.on { color: #5eead4; } .md-item.on svg { transform: translateY(-1px) scale(1.08); }
  .md-item.tap svg { animation: mdBounce 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
  @keyframes mdBounce { 0% { transform: scale(0.8); } 55% { transform: translateY(-4px) scale(1.18); } 100% { transform: translateY(-1px) scale(1.08); } }

  body.md-locked { overflow: hidden; }
  .md-sheet { display: block; position: fixed; inset: 0; z-index: 420; visibility: hidden; }
  .md-sheet.open { visibility: visible; }
  .md-shade { position: absolute; inset: 0; background: rgba(2, 6, 12, 0.62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; transition: opacity 0.35s; }
  .md-sheet.open .md-shade { opacity: 1; }
  .md-panel { position: absolute; bottom: 0; left: 50%; width: min(560px, 100%); max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px calc(22px + env(safe-area-inset-bottom)); translate: -50% 0;
    border-radius: 28px 28px 0 0; background: linear-gradient(180deg, rgba(22, 33, 50, 0.985), rgba(8, 13, 23, 0.995)); border: 1px solid rgba(255, 255, 255, 0.13); border-bottom: 0; box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.55);
    transform: translateY(105%); transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.25, 1); }
  .md-sheet.open .md-panel { transform: none; }
  .md-panel.drag { transition: none; }
  .md-grab { width: 44px; height: 5px; border-radius: 9px; background: rgba(255, 255, 255, 0.22); margin: 2px auto 12px; }
  .md-me { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
  .md-me .av { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: radial-gradient(circle at 35% 30%, #27454a, #0d1a20); border: 2px solid rgba(245, 196, 81, 0.6); }
  .md-me .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .md-me b { font: 600 17px 'Outfit', sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .md-me small { font: 500 12px 'Outfit', sans-serif; color: #8ea0b8; }
  .md-x { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer; }
  .md-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  @media (min-width: 600px) { .md-grid { grid-template-columns: repeat(4, 1fr); } }
  .md-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 20px; text-decoration: none; color: #e6ebf5; font: 600 12px/1.2 'Outfit', sans-serif; text-align: center;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); opacity: 0; translate: 0 16px; }
  .md-tile i { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; font-style: normal; background: rgba(255, 255, 255, 0.08); background: color-mix(in srgb, var(--a) 22%, #08101a); border: 1px solid color-mix(in srgb, var(--a) 55%, transparent); box-shadow: 0 6px 18px color-mix(in srgb, var(--a) 22%, transparent); }
  .md-sheet.open .md-tile { opacity: 1; translate: none; transition: opacity 0.4s ease, translate 0.55s cubic-bezier(0.2, 0.9, 0.3, 1), scale 0.18s; transition-delay: calc(var(--n) * 38ms + 140ms), calc(var(--n) * 38ms + 140ms), 0s; }
  .md-tile:active { scale: 0.94; transition-delay: 0s !important; }
  .md-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
  .md-foot form { flex: 1 1 100%; margin: 0; }
  .md-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 14px; border-radius: 16px; width: 100%; cursor: pointer; color: #e6ebf5; font: 600 14px 'Outfit', sans-serif;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
  .md-btn.out { color: #fca5a5; border-color: rgba(248, 113, 113, 0.35); }
  .md-btn[hidden] { display: none; }

  /* the page behind the dock needs room */
  body.has-dock:not(.hop-page):not(.sc-body) #main-content { padding-bottom: 110px; }
  body.has-dock #labs-root { padding-bottom: 92px; }
}

/* ── 4. theme panel on phones (the 🎨 button itself only exists on the dashboard — js/theme.js) ── */
@media (max-width: 899px) {
  .hop-panel { left: 12px; right: 12px; width: auto; bottom: calc(92px + env(safe-area-inset-bottom)); border-radius: 22px; animation: mdPanel 0.35s cubic-bezier(0.2, 0.9, 0.3, 1); }
  body:not(.has-dock) .hop-panel { bottom: 76px; }
  @keyframes mdPanel { from { opacity: 0; translate: 0 24px; scale: 0.96; } }
  .hop-panel .t { min-height: 46px; }
}

/* ── 5. page-specific phone fixes ────────────────────────────────────────── */
@media (max-width: 899px) {
  /* Labs: "The Explorer's Desk" */
  #labs-desk { padding: 10px !important; }
  #labs-desk > main { padding: 18px 16px !important; gap: 20px !important; }
  #labs-desk header { gap: 14px !important; padding-bottom: 16px !important; }
  #labs-desk h1 { font-size: 26px !important; line-height: 1.1; }
  #labs-desk header > div:last-child { display: grid !important; grid-template-columns: 1.3fr 1fr 1fr; gap: 0 !important; width: 100%; padding: 10px 4px !important; }
  #labs-desk header > div:last-child > div { padding-inline: 6px !important; min-width: 0; }
  #labs-desk header select { max-width: 100%; font-size: 12px; }
  #labs-search { font-size: 16px !important; }
  #labs-cats { -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; margin-inline: -16px; padding-inline: 16px; }
  #labs-cats::-webkit-scrollbar { display: none; }
  #labs-cats > * { scroll-snap-align: start; flex: none; }

  /* Dictionary */
  #dict-root { height: 100dvh; }
  #dict-header > div:first-child { padding: 16px 16px 10px !important; flex-wrap: wrap; gap: 10px; }
  #dict-header > div:first-child > div:first-child { gap: 10px !important; }
  #dict-header h1 { font-size: 15px !important; letter-spacing: 0.16em !important; }
  #dict-header p { letter-spacing: 0.3em !important; font-size: 7px; }
  #dict-search { width: 100% !important; flex: 1 1 100%; font-size: 14px !important; padding: 11px 14px !important; letter-spacing: 0.12em !important; }
  #dict-cats { padding: 0 16px !important; gap: 22px !important; -webkit-overflow-scrolling: touch; }
  #dict-cats button { font-size: 10px !important; letter-spacing: 0.24em !important; padding: 8px 0 !important; }
  #dict-workspace > nav { width: 32px; }
  #dict-workspace [data-letter-btn] { font-size: 11px !important; width: 22px !important; }
  #dict-list { margin-left: 40px !important; padding: 18px 14px 110px 8px !important; }
  #dict-overlay { padding: 10px !important; }
  #dict-stack { height: min(440px, 70dvh) !important; }

  /* Library / notes / papers / upload / students (legacy shell) */
  #main-content { padding-top: 16px; }

  /* tables inside the newer pages scroll inside their own frame and keep readable cells */
  .hop-table-wrap { -webkit-overflow-scrolling: touch; }
  .hop-topbar { gap: 10px; }
  .hop-topbar h1 { font-size: 21px; }
  .hop-modal { width: calc(100% - 20px) !important; max-height: 88dvh; overflow-y: auto; }
}
/* a table becomes a stack of cards, every cell keeping its column title (labels are added by motion.js) */
@media (max-width: 760px) {
  .hop-table-wrap:not(.ag-wrap) { overflow: visible !important; max-height: none !important; border: 0 !important; background: none !important; }
  .hop-table:not(.ag-table), .hop-table:not(.ag-table) tbody, .hop-table:not(.ag-table) tr, .hop-table:not(.ag-table) td { display: block; width: 100%; }
  .hop-table:not(.ag-table) thead { display: none; }
  .hop-table:not(.ag-table) tr { margin: 0 0 12px; padding: 12px 13px; border: 1px solid var(--hop-border) !important; border-radius: 16px; background: var(--hop-surface-2); }
  .hop-table:not(.ag-table) td { padding: 6px 0 !important; border: 0 !important; min-width: 0 !important; max-width: none !important; white-space: normal !important; }
  .hop-table:not(.ag-table) td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--hop-muted); }
  .hop-table:not(.ag-table) td .hop-btn { margin-right: 6px; }
  .hop-table:not(.ag-table) td input[type="checkbox"] { width: 22px; height: 22px; }
  .hop-table:not(.ag-table) .ag-narrow { width: 100% !important; max-width: none !important; }
  .hop-table:not(.ag-table) td.ag-num { font-weight: 800; color: var(--hop-accent-2); }
}
/* the question editor keeps its wide table (it scrolls inside its own frame) */
@media (max-width: 760px) { .ag-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; } .ag-table td textarea { min-height: 84px; } .ag-table .hop-select, .ag-table .hop-input { min-width: 84px; } }
@media (max-width: 620px) {
  /* Workspace: avatar beside the name, the three counters in one row, quick access as a 2-column grid */
  .ws-hero { gap: 14px 14px; padding: 16px; }
  .ws-avatar { width: 62px; height: 62px; font-size: 32px; border-radius: 20px; }
  .ws-hero > div[style*="min-width:220px"] { min-width: 0 !important; flex: 1 1 60%; }
  .ws-hero > div[style*="font-size:26px"], .ws-hero div[style*="font-size:26px"] { font-size: 21px !important; }
  .ws-hero .ws-mini { flex: 1 1 28%; min-width: 0; padding: 8px 4px; }
  .hop-grid.cols-4:has(.ws-link) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ws-link { padding: 13px; } .ws-link .e { font-size: 24px; } .ws-link b { font-size: 14px; } .ws-link small { font-size: 11px; }
}
@media (max-width: 420px) {
  .hop-wrap { padding-inline: 12px; }
  .hop-card { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  #root, .md-dock, .md-panel, .md-tile, .md-pill, .rv, .rv.in { animation: none !important; transition-duration: 0.001s !important; }
  .rv { opacity: 1; translate: none; scale: none; }
}

.dict-empty { margin: 40px auto; max-width: 320px; text-align: center; font-family: 'Cormorant Garamond', Georgia, serif; color: #6b5a3a; }
.dict-empty b { display: block; font-size: 22px; margin-bottom: 6px; }