/* The floor plan with its diamonds: the archive, the topic screens, and behind every entry
   (assets/js/app/plan.js). */

/* The plan's frame keeps its proportions (820 × 562) and is as large as the space between the
   header and the bottom margin (Figma: 209–771) and between the left margin and the right column
   allows; when the height limits it, it is centred in that width. The plan itself (.plan-box) is
   placed by plan.js: never smaller than its minimum, zoomed and panned by the visitor, so it may
   stick out of the frame into the rest of the screen (.plan-area, the first thing on the screen).
   What lies over it (big word, intro, right column, menu button) sits at z-index 2, above the
   diamonds at 1, and keeps a light background (--fade) so it stays readable; a hovered diamond
   (z-index 4) with its hover text and buttons rises above all of it. */
.screen.main {
  --plan-w: min(var(--main), calc((var(--h) - 270px * var(--vs)) * 820 / 562));
  --plan-x: calc(var(--gut) + (var(--main) - var(--plan-w)) / 2);
  --fade: rgba(236, 237, 232, .8);
  overflow: visible;   /* the bars stick out sideways; .plan-area clips the plan */
}
.plan-area { position: absolute; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.plan-area.can-pan { cursor: grab; }
.plan-area.panning { cursor: grabbing; }
.plan-frame, .plan-box { position: absolute; left: var(--plan-x); top: calc(209px * var(--vs)); width: var(--plan-w); aspect-ratio: 820 / 562; }
.plan-frame { pointer-events: none; }   /* only measured by plan.js */
.plan { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* left/top (in % of the plan, set by plan.js) are the diamond's centre; --icon-k undoes the page's
   scaling, so the diamonds and their buttons keep their size in the window. .is-hover (plan.js
   syncHover) counts as :hover. The whole diamond links to the entry. */
.icons .icon { margin: -26.163px 0 0 -26.163px; transform: scale(var(--icon-k, 1)); }
.icons .icon:hover::before, .icons .icon.is-hover::before, .icons .icon:focus-within::before { transform: translate(-50%, -50%) rotate(45deg) scale(1.18); filter: brightness(1.06); }
.icons .icon:hover .icon-link > img, .icons .icon.is-hover .icon-link > img { transform: scale(1.1); }
.icons .icon:hover .tip, .icons .icon.is-hover .tip, .icon-link:focus-visible .tip {
  opacity: 1; visibility: visible; transform: translate(0, calc(-50% + var(--tip-dy, 0px))); transition-delay: 0s;
}
.icon-link { position: absolute; inset: 0; }
.icon-link:focus-visible > img { transform: scale(1.1); }

/* hover text (title and Bezugswerk) to the right of a diamond; grows downward and stays centred on the
   diamond when a title wraps. plan.js (placeTip) flips it to the left (.tip-left) and moves it by
   --tip-dy where it would leave the plan area. */
.icon .tip {
  position: absolute; left: 26px; top: 26px; width: 241px; min-height: 52px; padding: 8px 12px 8px 36px;
  display: flex; align-items: center; background: rgba(255, 255, 255, .9); z-index: 0;
  opacity: 0; visibility: hidden; transform: translate(-6px, calc(-50% + var(--tip-dy, 0px)));
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.7,.2,1), visibility 0s linear .2s;
}
.icon .tip.tip-left { left: auto; right: 26px; padding: 8px 36px 8px 12px; transform: translate(6px, calc(-50% + var(--tip-dy, 0px))); }
.icon .tip span { display: block; min-width: 0; font-size: 12px; line-height: normal; color: #000; overflow-wrap: anywhere; }
.icon .tip u { text-decoration: underline; }

/* entries not approved yet (visible only to their author and to admins): only the diamond fades,
   the buttons above it stay fully visible */
.icon.pending::before, .icon.pending .icon-link > img { opacity: .55; }
.icon.pending .icon-link > img { filter: grayscale(.4); }

/* admins: the author's name as a diagonal line just outside the diamond, along its lower right edge;
   dark with a white halo so it reads on the floor plan */
.icon .who {
  position: absolute; left: 50%; top: 50%; z-index: 2; max-width: 140px; overflow: hidden; text-overflow: ellipsis;
  transform: translate(-50%, -50%) translate(19px, 19px) rotate(-45deg);
  font: 700 10px/1.2 "IBM Plex Sans", system-ui, sans-serif; white-space: nowrap; color: var(--dark); pointer-events: none;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff;
}
.icon.pending .who { opacity: .75; }

/* the right column: the topic buttons from --a (391) down, the library button 20 below them, the two
   small links on the bottom edge; above --a, at fixed distances, RESET (topic screens) and for
   logged-in users their name and "+ NEUER PUNKT" (965/317) */
.screen .side { top: 0; bottom: 30px; padding-top: var(--a); justify-content: flex-start; pointer-events: none; z-index: 2; }
.screen .side > * { pointer-events: auto; }
.side .btn-library { margin-top: 20px; }
.side .home-link { margin: auto 0 -1px; }
/* RESET sits in the header layer, which covers the screen: centred over the column (965–1260) */
.screen.main .reset { position: absolute; right: 167.5px; top: calc(var(--a) - 46px); transform: translateX(50%); }
.screen.main.with-user .reset { top: calc(var(--a) - 110px); }
.screen .side .btn-new { position: absolute; left: 0; right: 0; top: calc(var(--a) - 74px); }
.screen .side .user-block { position: absolute; left: 0; right: 0; top: calc(var(--a) - 154px); min-height: 59px; margin: 0; }
.screen .side .user-block.user-admin { top: calc(var(--a) - 164px); min-height: 0; }
.screen.main.topic .side .user-block { top: calc(var(--a) - 214px); }
.screen.main.topic .side .user-block.user-admin { top: calc(var(--a) - 224px); }
.screen .side .user-block .bell { align-self: flex-start; margin-top: 11px; }
/* compact and phone layouts lay the column out as rows: everything back in the flow */
.compact .screen .side, .mobile .screen .side { padding-top: 0; }
.compact .screen .side .btn-new,
.mobile .screen .side .user-block, .mobile .screen .side .btn-new { position: static; transform: none; min-height: 0; }
.compact .side .home-link, .mobile .side .home-link { margin: 0; }

/* the archive: the site's title over the plan, beside the plan's left edge */
.screen.main .title { position: absolute; left: var(--plan-x); top: calc(61px * var(--vs)); max-width: calc(var(--w) - var(--plan-x) - 230px); background: var(--fade); box-shadow: 0 0 0 10px var(--fade); }
.title .sub { font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.6; margin: 0; }
/* over the plan: light backgrounds 10px beyond the small things, the small links only as wide as their text */
.screen.main .user-info, .screen.main .small-link, .screen.main .menu-btn, .screen.main .bell-btn { background: var(--fade); box-shadow: 0 0 0 10px var(--fade); }
.screen.main .btn-library { background: var(--fade); }
.screen.main .btn-library:hover { background: rgba(214, 215, 210, .85); }
.screen.main .small-link { align-self: center; }

/* the number of entries in the top right corner of a topic button, in the button's text colour */
.side .btn { position: relative; }
.btn .count { position: absolute; right: 8px; top: 7px; font-size: 12px; font-weight: 700; line-height: 1; color: inherit; }

/* ------------------------------------------------------------------
   Topic screens: big word, intro, bars in the topic colour
   ------------------------------------------------------------------ */
/* the big word grows with the window width (137px at 1280); --word-k shrinks a long word so it
   ends before the right column like the short ones (MATERIALITÄT: 12 letters against TECHNIK's 7) */
.bigword {
  --word-k: 1;
  position: absolute; left: 20px; top: calc(16px * var(--vs)); margin: 0; z-index: 2;
  font-weight: 700; font-size: calc(var(--w) * 137 / 1280 * var(--word-k)); line-height: normal; white-space: nowrap; mix-blend-mode: overlay;
}
.bigword.technique { color: var(--yellow); }
.bigword.materiality { color: var(--purple); --word-k: .94; }
.bigword.time { color: var(--brown); }
/* the intro runs as wide as the space to the right column allows (1030 at 1280), so a long text takes
   few lines and covers little of the plan; it stays clear of the menu button. With a user block in
   the right column, in windows narrower than 1280 it would run into the name, so it narrows faster
   there (1030 at 1280, 646 at 1024) */
.intro {
  --intro-width: 1030px;
  position: absolute; left: 20px; top: calc(45px * var(--vs)); z-index: 2; width: min(var(--intro-width), calc(var(--w) - 200px)); height: 129px;
  display: flex; flex-direction: column; justify-content: center; font-size: 20px; line-height: normal;
}
.with-user .intro { width: min(var(--intro-width), calc(var(--w) - 250px - max(0px, 1280px - var(--w)) * .5)); }
.intro p { margin: 0; }
/* the header (big word and intro) is only a layer over the plan here, without a box of its own; on a
   phone it is a block above the map (mobile.css), with the fold arrow and "mehr" */
.screen.main .head { position: absolute; inset: 0; z-index: 2; pointer-events: none; }   /* one layer: the big word blends inside it, not with the plan */
.screen.main .head > :not(.intro-fade) { pointer-events: auto; }
.intro-more, .head-toggle { display: none; }
/* the intro lies over the big word; its light background (a copy with invisible text) goes underneath the word */
.intro-fade { color: transparent; pointer-events: none; user-select: none; }
.intro-fade::before { content: ""; position: absolute; inset: -10px; background: var(--fade); z-index: -1; }

/* ------------------------------------------------------------------
   Compact floor plan: in windows narrower than 1100 px (site.js sets .compact on #stage) the plan
   takes the whole width; the right column becomes a row of buttons under the plan (NEUER PUNKT
   first), and a line at the bottom with the user's name, bell, filter and the small links
   ------------------------------------------------------------------ */
.compact .screen.main {
  /* plan: between the header (160) and the rows at the bottom (about 120), centred */
  --plan-w: min(calc(var(--w) - 2 * var(--gut)), calc((var(--h) - 160px * var(--vs) - 133px) * 820 / 562));
  --plan-x: calc((var(--w) - var(--plan-w)) / 2);
}
.compact .screen.main .plan-frame, .compact .screen.main .plan-box { top: calc(160px * var(--vs)); }
.compact .screen.main .intro { top: 32px; height: auto; width: calc(var(--w) - 200px); font-size: 18px; }
.compact .screen.main .title { left: var(--gut); top: 40px; max-width: calc(var(--w) - var(--gut) - 230px); }
.compact .screen.main .title .h1 { font-size: 44px; }
/* the row of buttons 58 above the bottom edge, NEUER PUNKT first; under it a line with the name,
   links and filter on the left, bell, RESET, home link and legal notice on the right (placed from
   the row, which is the column's box here) */
.compact .screen.main .side {
  left: var(--gut); right: var(--gut); width: auto; top: auto; bottom: 58px;
  flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 10px;
}
.compact .screen.main .side .btn { flex: none; min-width: 0; width: calc((100% - 30px) / 4); margin: 0; font-size: 16px; }
.compact .screen.main.with-user .side .btn { width: calc((100% - 40px) / 5); }
.compact .screen.main .side .user-block { display: contents; }
.compact .screen.main .side .user-info {
  position: absolute; left: 0; bottom: -44px; height: 30px; max-width: calc(var(--w) * .42);
  flex-direction: row; align-items: center; gap: 12px;
}
.compact .screen.main .side .user-filter-select { width: 200px; margin: 0; flex: none; }
.compact .screen.main .side .bell { position: absolute; right: 320px; bottom: -46px; margin: 0; }
.compact .screen.main .bell-list { top: auto; bottom: 42px; }
.compact .screen.main .side .small-link { position: absolute; bottom: -36px; margin: 0; transform: none; }
.compact .screen.main .side .legal { right: 0; }
.compact .screen.main .side .home-link { right: 125px; }
.compact .screen.main .reset { top: auto; bottom: 22px; right: calc(var(--gut) + 230px); transform: none; }

/* ------------------------------------------------------------------
   User block at the top of the right column (logged-in users): name and "Abmelden"
   (admins: the student filter under it, students: the bell beside it), then "+ NEUER PUNKT"
   ------------------------------------------------------------------ */
.user-block { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.user-label { font-weight: 700; font-size: 20px; line-height: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-links { font-size: 12px; line-height: normal; }
.user-links a { transition: opacity .2s ease; }
.user-links a:hover { opacity: .65; }
.user-filter { margin: 0; }
.user-filter-select { margin-top: 6px; width: 100%; font: 13px/normal "IBM Plex Sans", system-ui, sans-serif; color: var(--dark); background: #fff; border: 1px solid #bbb; padding: 4px 6px; }
/* a full-size button like the topic buttons, dark so it stands apart from them */
.btn-new { padding: 0; border: 0; background: var(--dark); color: #fff; font-family: inherit; cursor: pointer; }
.btn-new:hover, .btn-new:focus-visible { background: #000; }

/* students: the bell beside their name, with the number of new notes and the list of all notes */
.bell { position: relative; z-index: 30; }
.bell-btn { position: relative; display: block; width: 36px; height: 36px; padding: 6px; cursor: pointer; list-style: none; }
.bell-btn::-webkit-details-marker { display: none; }
.bell-btn img { display: block; width: 24px; height: 24px; transition: transform .2s ease; }
.bell-btn .bell-count { position: absolute; right: 0; top: 0; }
.bell-btn:hover img, .bell[open] .bell-btn img { transform: rotate(-12deg); }
.bell-list {
  position: absolute; right: 0; top: 42px; width: 295px; max-height: 380px; overflow-y: auto;
  background: #fff; box-shadow: 0 12px 32px rgba(0, 0, 0, .25); font-size: 13px; line-height: 1.35;
}
.bell-head { margin: 0; padding: 12px 14px 8px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .7; }
.bell-item { display: block; padding: 10px 14px 10px 11px; border-top: 1px solid rgba(55, 55, 55, .12); border-left: 3px solid transparent; transition: background-color .15s ease; }
.bell-item:hover { background: var(--bg); }
.bell-item.is-new { border-left-color: var(--purple); background: rgba(242, 232, 87, .25); }
.bell-title { display: block; font-weight: 700; font-style: italic; }
.bell-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.bell-meta { display: block; margin-top: 4px; font-size: 11px; opacity: .7; }
.bell-empty { margin: 0; padding: 10px 14px 14px; opacity: .7; }