/* /space/ #together — dua skrin app Space sebenar (pelajar + penyelia) dalam satu bingkai, satu meter, suis tema.
   Markup: site/space_together.py; skrip: site/space-together.js. Diluluskan dari mockup Space v3 (2026-11-09). */
.co-sec + section { border-top: 0; }
.co-head { margin-bottom: 40px; }
.co-head h2 { margin: 0; }
.sp-page p.co-lede { margin: 16px 0 0; max-width: 62ch; color: var(--copy); }

/* split-screen: dua tetingkap Mac sebenar, garis pemisah rapat, lower third nama, jalur latar di separuh bawah */
.co-stage { position: relative; isolation: isolate; padding-bottom: 8px; }
.co-stage::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 56%; bottom: 0; background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); }
.co-film { width: min(1240px, calc(100vw - 64px)); margin-inline: calc(50% - min(620px, 50vw - 32px)); }
.co-film { position: relative; }
.co-film .demo-bar { margin: 14px 0 0; }                  /* meter + tajuk babak di bawah skrin (Faris 2026-11-12) */
.co-film .dm-group { flex-grow: 1; }
.co-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.co-pane { min-width: 0; }
.co-pane .hot { pointer-events: none; }
/* Bar Mac dengan nisbah tetingkap sebenar: app 1180px di sini (laman utama 1500px), jadi bar dan titik diskala ×1.26 */
.co-pane[data-mode="ai"] .window-bar { height: 2.4cqw; }
.co-pane .own-bar { height: 2.4cqw; font-size: 1.07cqw; }
.co-pane .own-bar i { width: .88cqw; height: .88cqw; margin: -.44cqw 0 0 -.44cqw; }
.co-pane .own-bar i:nth-child(1) { left: 1.14cqw; } .co-pane .own-bar i:nth-child(2) { left: 2.78cqw; } .co-pane .own-bar i:nth-child(3) { left: 4.48cqw; }
.co-pane .window-body { aspect-ratio: 1180 / 720; background: #fff; }
.co-film[data-theme="dark"] .co-pane .window-body { background: #151515; }
.co-pane video { display: block; width: 100%; height: 100%; }
.co-pane video.co-alt { position: absolute; inset: 0; opacity: 0; pointer-events: none; }   /* rakaman tema lain, dimuat awal (space-together.js setTheme) */
/* Lompat babak: bingkai babak (sama dengan bingkai kunci video pada masa itu) menutup video sementara video dicari */
.co-snap { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0; pointer-events: none; }
.co-snap.on { opacity: 1; }
.sp-page .co-third { position: absolute; inset-inline-start: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 5px 10px 5px 8px;
  border-inline-start: 2px solid var(--wc, #888); border-radius: 2px; background: #111; color: #fff; opacity: 0; transform: translateY(6px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.co-third b { font: 600 12.5px/1.25 var(--font); }
.co-third span { font: 400 11px/1.3 var(--font); color: #b4b4b4; }
html[lang="ar"] .co-third b, html[lang="ar"] .co-third span { font-family: 'Amiri', var(--font); line-height: 1.5; }
.co-pane.third .co-third { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .co-third { transition: none; } }

.co-band { position: relative; background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); padding: 56px 0 72px; }
.co-band .value-grid { border-color: transparent; }
.sp-page .co-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.co-grid .value:first-child { border-inline-start: 0; padding-inline-start: 0; }

@media (max-width: 900px) {
  .co-film { width: auto; margin-inline: 0; }
  .co-split { grid-template-columns: minmax(0, 1fr); }
  .sp-page .co-third { inset-inline-start: 8px; bottom: 8px; }
  .sp-page .co-grid { grid-template-columns: minmax(0, 1fr); }
  .co-grid .value { border-inline-start: 0; padding-inline: 0; }
}

/* Bar tajuk Mac ikut spec skrin demo: warna sedikit beza daripada skrin, garis halus, tanpa tajuk; ikut tema skrin. */
.co-pane .own-bar { background: #f4f4f4; box-shadow: inset 0 -1px 0 #e4e4e4; }
.co-film[data-theme="dark"] .co-pane .own-bar { background: #181818; box-shadow: inset 0 -1px 0 #0a0a0a; }
.co-pane .own-bar > span { display: none; }
.co-film[data-theme="dark"] .co-pane.window { background: #151515; }
/* Butang tema skrin: sama rupa dan tingkah dengan .demo .screen-mode (styles.css) — di luar tepi skrin, bila hover. */
.co-split { position: relative; }
.co-film .co-screen { position: absolute; top: 0; inset-inline-start: calc(100% + 12px); z-index: 6; width: 34px; height: 34px;
  display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .2s cubic-bezier(.4, 0, .2, 1) .35s, visibility 0s .55s, background-color .12s ease-out; }
.co-film .co-screen svg { display: block; }
.co-film .co-screen:hover { background: var(--band); }
@media (hover: hover) and (pointer: fine) {
  .co-film:hover .co-screen, .co-film .co-screen:focus-visible { opacity: 1; visibility: visible; transition-delay: 0s; }
}
@media (hover: none), (pointer: coarse) { .co-film .co-screen { display: none; } }
.co-film.screen-in .co-screen { inset-inline-start: auto; top: auto; bottom: 14px; inset-inline-end: 14px; border-color: #353535; background: #1d1d1d; color: #e6e6e6; }
.co-film.screen-in[data-theme="light"] .co-screen { border-color: #dedede; background: #fff; color: #2b2b2b; }

/* Meter Edit together: tiada butang jeda / mula semula (klik skrin = jeda, ▶ di luar skrin); garis babak di atas, tajuk dan
   subtajuk babak di bawahnya (Faris 2026-11-12). */
.co-film .dm-btns { display: none; }
.co-film .demo-bar .dm-track { order: 0; }
.co-film .demo-bar .demo-meter { order: 1; flex: 1 0 100%; }
.co-film .co-replay { position: absolute; top: 44px; inset-inline-start: calc(100% + 12px); z-index: 6; width: 34px; height: 34px;
  display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .2s cubic-bezier(.4, 0, .2, 1), visibility .2s, background-color .12s ease-out; }
.co-film .co-replay svg { display: block; margin-inline-start: 2px; }
[dir="rtl"] .co-film .co-replay svg { margin-inline-start: 0; margin-inline-end: -2px; }
.co-film .co-replay:hover { background: var(--band); }
.co-film.co-stopped .co-replay { opacity: 1; visibility: visible; }
@media (hover: none), (pointer: coarse) { .co-film .co-replay { top: 0; } }
.co-film.screen-in .co-replay { inset-inline-start: auto; top: auto; bottom: 14px; inset-inline-end: 56px; border-color: #353535; background: #1d1d1d; color: #e6e6e6; }
.co-film.screen-in[data-theme="light"] .co-replay { border-color: #dedede; background: #fff; color: #2b2b2b; }
@media (hover: none), (pointer: coarse) { .co-film.screen-in .co-replay { inset-inline-end: 14px; } }
.co-split .co-pane { cursor: pointer; }