:root { --hub-max-w: 1600px; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
#bg { width: 100%; height: auto; display: block; }
#overlays { position: absolute; inset: 0; pointer-events: none; }
.overlay {
  position: absolute;
  transform: translate(-50%, -50%); /* anchor from center */
  pointer-events: auto;             /* enable clicks for hotspots */
}
.hotspot { cursor: pointer; }

/* --- Readability system --- */
:root {
  --font-scale: 1;
  --line-space: 1.5;
}

/* Apply scaling site-wide */
html, body { font-size: calc(16px * var(--font-scale)); line-height: var(--line-space); }

/* High-contrast mode */
.hc body, body.hc {
  background: #fff !important;
  color: #000 !important;
}
.hc a, body.hc a { color: #000; text-decoration: underline; }

/* Floating widget */
#readability-widget {
  position: fixed;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 6px;
  z-index: 1000;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  backdrop-filter: blur(4px);
}
#readability-widget button {
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
#readability-widget button:focus { outline: 2px solid #000; }
#readability-widget button:hover { background: #f3f3f3; }

/* --- Dyslexia-friendly font (OpenDyslexic via jsDelivr) --- */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/gh/antijingoist/open-dyslexic/alternatives/OpenDyslexicAlt-Regular.otf') format('opentype');
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/gh/antijingoist/open-dyslexic/alternatives/OpenDyslexicAlt-Bold.otf') format('opentype');
  font-display: swap;
  font-weight: 700;
}

/* When dyslexia-friendly mode is on */
body.dys {
  font-family: 'OpenDyslexic', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  letter-spacing: 0.02em;   /* slight spacing can aid readability */
}

/* Adapt Tool UI */
#adapt-tool .card {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 12px 0;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
#adapt-tool .row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0;
}
#adapt-tool .muted { color: #666; font-size: 0.95rem; }
#adapt-tool textarea {
  width: 100%; resize: vertical;
  padding: 10px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.15);
  background: #fff;
}
#adapt-tool select, #adapt-tool button, #adapt-tool .file span {
  padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.15); background: #fff; cursor: pointer;
}
#adapt-tool button:hover { background: #f4f4f4; }
#adapt-tool .file input { display: none; }
#adapt-tool .file span { display: inline-block; }
#adapt-tool .preview {
  min-height: 140px; background: #fff; border-radius: 10px; padding: 12px; border: 1px solid rgba(0,0,0,0.12);
}
#adapt-tool .preview h4 { margin: 12px 0 6px; }
#adapt-tool .badge { display:inline-block; padding:2px 6px; border-radius:6px; background:#eef; color:#334; font-size:.85rem; margin-right:6px; }

/* Upload progress */
.progress {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0; background: #f4f6f8; border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px; padding: 6px 10px;
}
.progress-rail {
  position: relative; width: 180px; height: 8px;
  background: #e5eaf0; border-radius: 6px; overflow: hidden;
}
.progress-bar {
  height: 100%; background: #4a90e2; border-radius: 6px;
  transition: width .18s ease;
}
.progress-text { font-size: .9rem; color: #333; min-width: 36px; text-align: right; }

.linklike { background: none; border: none; color: #0066cc; cursor: pointer; padding: 4px 6px; }

/* Stage */
#stage {
  position: relative;
  min-height: 100vh;
  background-color: #f0f0f0; /* fallback if image doesn't load */
  background-image: url("../public/covers/hub-background.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#stage{ min-height:100vh; background:#e8e8e8 url("../public/covers/hub-background.webp") center/contain no-repeat; }

[hidden] { display: none !important; }

/* ===================== */
/* Role Switch Panel CSS */
/* ===================== */
:root{
  --rp-bg: rgba(255,255,255,0.08);
  --rp-stroke: rgba(255,255,255,0.35);
  --rp-shadow: 0 8px 28px rgba(0,0,0,0.25);
  --rp-radius: 16px;
  --rp-chip-bg: rgba(255,255,255,0.12);
  --rp-chip-bg-hover: rgba(255,255,255,0.22);
  --rp-chip-ring: rgba(255,255,255,0.6);
  --rp-text: #fff;
  /* NUSD-inspired tints for active chips */
  --t-teacher: #FFD300;
  --t-student: #00B5E2;
  --t-admin:   #92278F;
  --t-support: #2BB673;
  --t-care:    #EC1C24;
  --t-comm:    #D91C5C;
}

/* Role Panel container (overlay) */
.role-panel{
  position:absolute;
  top:22%; left:5%;           /* position on left wall — adjust as needed */
  width: 420px;
  backdrop-filter: blur(6px);
  background: var(--rp-bg);
  border: 1px solid var(--rp-stroke);
  border-radius: var(--rp-radius);
  box-shadow: var(--rp-shadow);
  color: var(--rp-text);
  padding: 14px 14px 10px;
  user-select:none;
  z-index: 3;
}

.rp-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.rp-title{ font-weight:700; letter-spacing:.2px; }

.rp-creativity{
  appearance:none; border:1px solid var(--rp-stroke); color:var(--rp-text);
  background: rgba(255,255,255,0.08);
  border-radius: 12px; padding:6px 10px; cursor:pointer;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.rp-creativity:hover{ background: rgba(255,255,255,0.18); transform: translateY(-1px); }
.rp-creativity[aria-pressed="true"]{
  box-shadow: 0 0 0 3px rgba(255,255,255,0.25), 0 0 18px 2px rgba(255,255,255,0.3) inset;
}

.rp-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }

.rp-chip{
  appearance:none; border:none; cursor:pointer;
  background: var(--rp-chip-bg); color: var(--rp-text);
  border-radius: 12px; padding:10px 12px;
  display:flex; align-items:center; gap:8px; justify-content:center;
  font-weight:600;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
  outline: none;
}
.rp-chip:hover{ background: var(--rp-chip-bg-hover); transform: translateY(-1px); }
.rp-chip:focus-visible{ box-shadow: 0 0 0 3px var(--rp-chip-ring); }
.rp-chip[aria-selected="true"]{ box-shadow: 0 0 0 2px currentColor, 0 0 16px 2px currentColor inset; }

/* Active tints */
.rp-chip[data-role="teacher"]       { color: var(--t-teacher); }
.rp-chip[data-role="student"]       { color: var(--t-student); }
.rp-chip[data-role="administrator"] { color: var(--t-admin); }
.rp-chip[data-role="support-staff"] { color: var(--t-support); }
.rp-chip[data-role="caregiver"]     { color: var(--t-care); }
.rp-chip[data-role="community"]     { color: var(--t-comm); }

.rp-ico{ filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25)); }

/* Optional “slim list” variant
.role-panel{ width:260px; }
.rp-grid{ display:flex; flex-direction:column; gap:8px; }
.rp-chip{ justify-content:flex-start; }
*/