/* =====================================================================
   Athanor-Archiv – the parts every page uses
   ---------------------------------------------------------------------
   The layout follows the Figma file "BerlinUni" (a 1280 × 832 frame). In a
   window of that size every position is the Figma one; in other windows the
   layout stretches: positions are taken from the left margin (--gut), the
   right column, the window height (--h) or the vertical scale (--vs), see
   "Page frame and fluid layout" below. The fixed compositions (floor plan,
   start screen, topic header, audio and gallery views) are placed absolutely;
   everything that stacks (the right column, menu, library, text pages, forms)
   flows.

   Each screen has its own file next to this one, loaded only by the
   templates that show it (the $css list of site/snippets/layout.php):
     plan.css     floor plan, topic screens, user block   (archive, topics, entries)
     detail.css   text, audio and gallery views           (entries)
     start.css, menu.css, library.css, legal.css
     editor.css   editing tools, notes, review panel      (logged-in users)
     form.css     edit form and rich text box             (logged-in users)
   ===================================================================== */

:root {
  --yellow: #f2e857;
  --purple: #8130f2;
  --brown: #730e6c;
  --dark: #373737;
  --bg: #ecede8;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--dark);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;   /* words longer than their box (URLs, "gggggg…") break instead of running off */
}
a { color: inherit; text-decoration: none; }
/* while a modal layer is open (assets/js/app/modal.js) the page behind does not scroll */
html.modal-open { overflow: hidden; }
button.iconbtn { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }

/* ------------------------------------------------------------------
   Page frame and fluid layout
   #stage fills the window. site.js (fit()) sets on it:
     --w   its width, --h  the window height (both in CSS pixels)
     --vs  window height / 832, limited to 720–1080 px: vertical spacing of the full-window
           screens grows and shrinks with it
     --ws  its width / 1024, at most 1: below 1 only on the start screen in a narrow window
     --icon-k  1 / the page's scale: the points on the plan keep their size in the window
   and the classes .compact (narrower than 1100: buttons under the floor plan) and .narrow (the
   start screen in a window narrower than 1024, laid out at the window's width).
   Below 1024 px width (or 720 px height) the page is laid out at the nearest size in that range
   and shrunk to the window. Above 1280 px it is the 1280 × 832 page scaled as far as width and
   height allow and centred, so the window may have areas at both sides: every screen and overlay
   paints its colour (`--side`) into them itself (a wide box-shadow, clipped to its own height);
   the tint class on <html> (set by the template, see snippets/layout.php) colours the area below.
   From these follow the lines of the Figma grid (values at 1280 × 832 in brackets):
     --gut   left margin (125), grows with the width
     right column: 295 wide, 20 from the right edge (965–1260)
     --main  width between the left margin and the right column (820, the floor plan)
     --a     top of the first topic button in the right column (391)
   ------------------------------------------------------------------ */
html.tint-yellow { background: var(--yellow); }
html.tint-purple { background: var(--purple); }
html.tint-brown  { background: var(--brown); }
html.tint-light  { background: var(--bg); }
html.tint-dark   { background: var(--dark); }
html.tint-detail { background: rgba(255, 255, 255, .97); }
body { background: none; }
#viewport { position: relative; width: 100%; overflow: hidden; overflow: clip; }
#stage {
  --w: 1280px; --h: 832px; --vs: 1; --ws: 1; --icon-k: 1;
  --gut: min(calc(var(--w) * 125 / 1280), 170px);
  --main: calc(var(--w) - var(--gut) - 335px);
  --a: calc(391px * var(--vs));
  position: absolute; top: 0; left: 0; width: var(--w); min-height: var(--h); transform-origin: top left;
}
/* screen and overlay share one cell, so the page is as tall as the taller one (the app adds #app around them) */
#stage, #app { display: grid; }
#app, #base, #over { grid-area: 1 / 1; align-self: start; min-width: 0; }
#over { position: relative; }   /* only as tall as its overlay: empty, it must not cover the screen */
.screen { position: relative; width: 100%; height: var(--h); overflow: hidden; background: var(--bg); z-index: 0; --side: #ecede8; }
.overlay { position: relative; width: 100%; min-height: var(--h); z-index: 1; }
.screen, .overlay { box-shadow: 0 0 0 5000px var(--side); clip-path: inset(0 -5000px); }

/* bars at the top and bottom of a topic screen and of an entry; they take that topic's colour
   and run past the page to both window edges (#viewport clips them) */
.bar { position: absolute; left: -5000px; right: -5000px; height: 10px; background: var(--yellow); z-index: 3; }
.materiality .bar { background: var(--purple); }
.time .bar { background: var(--brown); }
.bar.top { top: 0; }
.bar.bottom { bottom: 0; }

/* ------------------------------------------------------------------
   Typography, buttons, links
   ------------------------------------------------------------------ */
.h1 { font-weight: 700; font-style: italic; font-size: 52px; line-height: 1.1; margin: 0; }

/* the 295 × 59 buttons */
.btn {
  flex: none; width: 295px; height: 59px;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0; border: 0; background: transparent;
  font-family: inherit; font-weight: 700; font-size: 20px; text-align: center; cursor: pointer;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, filter .2s ease, border-color .2s ease;
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(55, 55, 55, .16); filter: brightness(1.04); }
.btn:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(55, 55, 55, .14); transition-duration: .08s; }
.btn-technique  { background: var(--yellow);  color: var(--purple); }
.btn-materiality { background: var(--purple);  color: var(--yellow); }
.btn-time     { background: var(--brown); color: #fff; }
.btn-outline  { border: 2px solid var(--dark); color: var(--dark); }
.btn-all { display: none; background: #fff; color: var(--dark); border: 2px solid var(--dark); }   /* hidden, like main */
.btn-technique.active  { border: 1px dashed var(--purple); }
.btn-materiality.active { border: 1px dashed var(--yellow); }
.btn-time.active     { border: 1px dashed #fff; }
.btn-all.active { border-style: dashed; }
.btn-outline:hover { background: rgba(55, 55, 55, .06); }

/* the right column (floor plan, library): one stack, 10px apart, 20px from the right edge */
.side { position: absolute; right: 20px; width: 295px; display: flex; flex-direction: column; gap: 10px; }

.small-link { font-size: 12px; line-height: normal; text-align: center; transition: opacity .2s ease; }
.small-link:hover { opacity: .65; }

/* icon buttons (menu, close, back) */
.iconbtn { position: absolute; display: block; }
.iconbtn img { display: block; transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s ease; }
.menu-btn, .close-btn { right: 155px; top: calc(97px * var(--vs)); width: 24px; height: 24px; z-index: 4; }
.back-btn { left: 51px; top: 55px; width: 24px; height: 24px; }
.back-btn img { transform: rotate(180deg); }
.menu-btn:hover img, .close-btn:hover img { transform: scale(1.15); }
.close-btn:hover img { transform: rotate(90deg) scale(1.1); }
.back-btn:hover img { transform: rotate(180deg) translateX(3px); }

/* ------------------------------------------------------------------
   The diamond of an entry (floor plan, menu, library, "Neuer Punkt" dialog)
   ------------------------------------------------------------------ */
.icon { position: absolute; width: 52.326px; height: 52.326px; z-index: 1; display: block; }
.icon::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 37px; height: 37px;
  transform: translate(-50%, -50%) rotate(45deg); background: var(--c); z-index: 1;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), filter .25s ease;
}
.icon > img, .icon-link > img { position: absolute; left: 14px; top: 14px; width: 24px; height: 24px; z-index: 2; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.icon.podcast > img, .icon.podcast .icon-link > img { left: 13px; }
.icon.yellow  { --c: var(--yellow); }
.icon.purple  { --c: var(--purple); }
.icon.brown { --c: var(--brown); }
.icon.white { --c: #fff; }

/* the state of an entry next to its title (menu, library; only its author and admins see it) */
.state-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--yellow); color: var(--dark); vertical-align: middle; }
.state-tag.is-ok { background: var(--purple); color: #fff; }

/* students: the number of new notes from the admins (bell on the floor plan, start screen) */
.bell-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--purple); color: #fff; font: 700 11px/1 "IBM Plex Sans", system-ui, sans-serif;
}

/* ------------------------------------------------------------------
   Motion
   ------------------------------------------------------------------ */
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}