/*
 * campus3d.css
 * Styles for the Winthos University 3D campus renderer.
 *
 * The colour tokens below are the same nine custom properties that
 * platform/front/campus.css declares, repeated here so this file also stands
 * on its own if the campus page links it without the main stylesheet. No new
 * colour is introduced here: every rule below points at a token.
 */

:root {
  --ink: #182B36;
  --muted: #405460;
  --link: #174E75;
  --accent: #145A50;
  --danger: #922E24;
  --line: #667780;
  --paper: #F4F1E8;
  --surface: #FFFFFF;
  --soft: #E5ECE8;
}

/*
 * The stage is the box the canvas fills. The aspect ratio keeps the campus
 * framed the same way on a phone and on a wide screen.
 */
.campus3d-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 320px;
  max-height: 70vh;
  overflow: hidden;
  background-color: var(--soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}

/*
 * The canvas itself. touch-action is none so a drag pans the camera instead
 * of scrolling the page, and the cursor shows that the view can be dragged.
 */
#campus-canvas,
.campus3d-canvas {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 320px;
  background-color: var(--paper);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: grab;
}

.campus3d-stage #campus-canvas,
.campus3d-stage .campus3d-canvas {
  position: absolute;
  inset: 0;
  min-height: 0;
}

#campus-canvas:active,
.campus3d-canvas:active {
  cursor: grabbing;
}

/* Focus is always visible, and the canvas never traps it. */
#campus-canvas:focus-visible,
.campus3d-canvas:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -4px;
}

/* A visible label for the renderer state, used when the canvas reports an
   error and the building list takes over. */
.campus3d-note {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--danger);
  border-radius: 3px;
  background-color: var(--surface);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
}

.campus3d-note[data-state="ready"] {
  border-left-color: var(--accent);
}

/* Screen reader only text, for the description of the canvas. */
.campus3d-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Reduced motion: the renderer switches its camera transitions to instant,
   and nothing in this file animates either. */
@media (prefers-reduced-motion: reduce) {
  #campus-canvas,
  .campus3d-canvas,
  .campus3d-stage,
  .campus3d-note {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* Give the portrait overview a useful footprint above its building links. */
@media (max-width: 640px) {
  #campus-view #campus-canvas {
    min-height: 280px;
    height: clamp(18rem, 85vw, 22rem);
  }
}