/* Phones: windows narrower than 720 px. site.js (fit()) sets .mobile on #stage and lays the page out
   at the window's own width, never scaled (--w is the window width, --h its height). Everything that
   stands in columns or at fixed positions on the desktop is stacked in one column here:
     - the floor plan screens are a column of header (big word and intro), the map band, which takes
       the rest of the height, the buttons in two columns and the two small links;
     - menu, library, legal notice, the entry views and the edit forms are one column with the title
       at the top and the close or back button in the top corner.
   The map fills the band (plan.js placePlanFrame), two fingers or a double tap zoom it, one finger
   pans it. Loaded last on every page (site/snippets/layout.php). --mx is the side margin. */

.mobile { --mx: 16px; }
.mobile .h1 { font-size: 26px; }
.mobile .iconbtn.menu-btn, .mobile .iconbtn.close-btn { right: var(--mx); top: 18px; }
.mobile .back-btn { left: var(--mx); top: 18px; }
.mobile .edit-btn { left: calc(var(--mx) + 44px); top: 18px; }   /* beside the back arrow, in the row above the title */

/* ------------------------------------------------------------------
   Diamonds and their tools
   ------------------------------------------------------------------ */
.mobile .icon .tip { display: none; }   /* no hover on a touch screen: a tap opens the entry */
.mobile .icon-link { -webkit-touch-callout: none; }   /* a long press lifts one's own point, no link menu */
/* the buttons above one's own points: finger-sized (40 px, scaled with the diamond to 34). No hand: a
   point is moved by pressing it for a moment (plan.js). The approval switch and label leave the row and
   sit under the point, small (plan.js keepToolsInside slides them in at the edges) */
.mobile .icon-tools { top: -46px; gap: 6px; }
.mobile .tool { width: 40px; height: 40px; font-size: 22px; }
.mobile .tool img { width: 20px; height: 20px; }
.mobile .tool-drag { display: none; }
.mobile .icon-tools .tool-approve, .mobile .icon-tools .tool-state {
  position: absolute; left: 50%; top: 102px; transform: translateX(calc(-50% + var(--tools-dx, 0px)));
  height: 24px; padding: 0 7px 0 5px; font-size: 10px;
}

/* ------------------------------------------------------------------
   Floor plan: a column of header, map band, buttons
   ------------------------------------------------------------------ */
.mobile .screen.main { display: flex; flex-direction: column; }
/* the header has the page colour as its own background, so the big word's blend has something behind it */
.mobile .screen.main .head { position: relative; inset: auto; order: 1; flex: none; padding: 18px var(--mx) 10px; background: var(--bg); pointer-events: auto; }
.mobile .screen.main .plan-area { position: relative; inset: auto; order: 2; flex: 1 1 auto; min-height: 0; }
.mobile .screen.main .menu-btn { z-index: 3; background: none; box-shadow: none; }   /* above the header */

/* header: the big word lies behind the intro, as on the desktop; the intro stops short of the column
   with the menu button and the fold arrow */
.mobile .screen.main .intro.intro-fade { display: none; }   /* the desktop's light layer under the word: not needed here */
.mobile .screen.main .bigword { position: absolute; left: var(--mx); top: 18px; z-index: auto; font-size: calc(var(--w) * .17 * var(--word-k)); line-height: 1; mix-blend-mode: normal; }
/* the washed-out tints the desktop's blend gives the word, as fixed colours: on the phone nothing lies behind the header */
.mobile .screen.main .bigword.technique { color: #edeccb; }
.mobile .screen.main .bigword.materiality { color: #d6c6ea; --word-k: .75; }   /* the long word fits the phone's width */
.mobile .screen.main .bigword.time { color: #d3c0cf; }
.mobile .screen.main .intro { position: relative; left: auto; top: auto; z-index: auto; width: auto; height: auto; display: block; padding-right: 60px; font-size: 14px; line-height: 1.4; }
/* the fold arrow at the bottom right of the header (plan.js setHeadCollapsed) */
.mobile .screen.main .head-toggle {
  display: block; position: absolute; right: var(--mx); bottom: 6px; width: 28px; height: 28px; z-index: 3;
  border: 0; padding: 0; border-radius: 50%; background: var(--fade); cursor: pointer;
}
.mobile .screen.main .head-toggle img { display: block; width: 24px; height: 24px; margin: 2px; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.mobile .screen.main .head.is-collapsed .head-toggle img { transform: rotate(180deg); }
/* folded: two short lines – the word (or the title) small and in its full colour next to the menu
   button, then RESET on the line of the arrow; the intro hidden */
.mobile .screen.main .head.is-collapsed { padding: 16px 60px 8px var(--mx); }
.mobile .screen.main .head.is-collapsed .intro, .mobile .screen.main .head.is-collapsed .intro-more { display: none; }
.mobile .screen.main .head.is-collapsed .bigword { position: static; display: block; font-size: 22px; line-height: 28px; }
.mobile .screen.main .head.is-collapsed .bigword.technique { color: var(--yellow); }
.mobile .screen.main .head.is-collapsed .bigword.materiality { color: var(--purple); }
.mobile .screen.main .head.is-collapsed .bigword.time { color: var(--brown); }
/* short phones: the intro is cut to three lines so the map keeps its room; "mehr" shows the rest
   (plan.js marks the head .intro-cut when there is more, .intro-open when it is unfolded) */
@media (max-height: 720px) {
  .mobile .screen.main .head:not(.intro-open) .intro p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .mobile .screen.main .head.intro-cut .intro-more, .mobile .screen.main .head.intro-open .intro-more {
    display: inline-block; margin: 10px 16px 0 0; padding: 0; border: 0; background: none; cursor: pointer;
    font: 700 12px/normal "IBM Plex Sans", system-ui, sans-serif; color: var(--dark); text-decoration: underline;
  }
  .mobile .screen.main .intro-more::before { content: "mehr"; }
  .mobile .screen.main .head.intro-open .intro-more::before { content: "weniger"; }
}

/* header: the archive title, or the topic's word with its intro and RESET */
.mobile .screen.main .title { position: static; max-width: none; padding-right: 80px; background: none; box-shadow: none; }   /* clear of the fold arrow and the menu button */
.mobile .screen.main .title .h1 { font-size: 24px; }
.mobile .screen.main .title .sub { font-size: 13px; line-height: 1.45; margin-top: 4px; }
.mobile .screen.main .head .reset { position: static; display: inline-block; margin-top: 10px; transform: none; background: none; box-shadow: none; font-weight: 700; }
.mobile .screen.main .head.is-collapsed .reset { display: block; margin: 8px 0 0; line-height: 28px; text-align: left; }
.mobile .screen.main .head.is-collapsed .title { padding: 0 0 36px; }   /* the archive has no RESET: an empty line keeps the arrow below the menu button */
.mobile .screen.main .head.is-collapsed .title .sub { display: none; }
.mobile .screen.main .head.is-collapsed .title .h1 { font-size: 18px; line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the buttons: two per row (logged in: name, filter and "+ NEUER PUNKT" across), then the two small
   links side by side, centred */
.mobile .screen.main .side {
  position: relative; inset: auto; order: 3; flex: none; width: auto; pointer-events: auto;
  display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px var(--mx) 22px;
}
.mobile .screen.main .side .btn { width: calc(50% - 4px); height: 48px; padding: 0 6px; margin: 0; font-size: clamp(12px, calc(var(--w) * .038), 15px); }
.mobile .screen.main .side .btn .count { right: 6px; top: 5px; font-size: 11px; }
.mobile .screen.main .side .btn-new { width: 100%; height: 44px; }
.mobile .screen.main .small-link { margin: 4px 0 0; background: none; box-shadow: none; }
.mobile .screen.main .side .home-link { margin-right: 16px; }
/* logged in: name and links in one centred row above the buttons, the bell at its right end, the list opens upward */
.mobile .screen.main .side .user-block { position: relative; top: auto; display: block; flex: 1 1 100%; margin: 0; padding-right: 44px; }
.mobile .screen.main.topic .side .user-block, .mobile .screen.main .side .user-block.user-admin { top: auto; }
.mobile .screen.main .user-info { justify-content: center; }
.mobile .screen.main .side .user-block .bell { position: absolute; right: 0; top: -4px; margin: 0; }
.mobile .screen.main .user-info { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; background: none; box-shadow: none; }
.mobile .screen.main .user-label { font-size: 15px; }
.mobile .screen.main .user-filter { flex: 1 1 100%; }
.mobile .screen.main .user-filter-select { margin: 0; }
.mobile .screen.main .bell-btn { background: none; box-shadow: none; }
.mobile .screen.main .bell-list { top: auto; bottom: 42px; width: min(295px, calc(var(--w) - 2 * var(--mx))); }

/* ------------------------------------------------------------------
   Start screen: the narrow layout (start.css) with the phone's margins
   ------------------------------------------------------------------ */
.mobile .start.screen { padding-left: var(--mx); padding-right: var(--mx); }

/* ------------------------------------------------------------------
   Menu: the three topic columns one under the other
   ------------------------------------------------------------------ */
.mobile .menu { padding: 56px var(--mx) 48px; }
.mobile .menu .h1 { padding-right: 40px; }
.mobile .menu-cols { width: auto; margin-top: 28px; grid-template-columns: minmax(0, 1fr); row-gap: 32px; column-gap: 0; }
.mobile .menu .col-head { height: 48px; font-size: 15px; margin-bottom: 6px; }
.mobile .menu .item { padding: 14px 0; }
.mobile .menu .item .item-text { font-size: 17px; }
.mobile .menu .item .sub { font-size: 13px; }

/* ------------------------------------------------------------------
   Library: title, the three topic buttons in one row, the index, then the text
   ------------------------------------------------------------------ */
.mobile .library { padding: 56px var(--mx) 80px; }
.mobile .library .h1 { padding-right: 40px; }
.mobile .library .side { position: static; width: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 20px; }
.mobile .library .side .btn { width: auto; height: 44px; padding: 0 4px; font-size: clamp(10px, calc(var(--w) * .032), 13px); }
.mobile .library .side .btn .count { right: 5px; top: 4px; font-size: 10px; }
.mobile .lib-index { grid-column: 1 / -1; margin-top: 14px; }
.mobile .library .body { width: auto; margin-top: 28px; font-size: 17px; }
.mobile .library .lib-intro { margin-bottom: 44px; }
.mobile .library .lib-intro p { margin-bottom: 18px; }
.mobile .lib-part { margin-bottom: 56px; }
.mobile .lib-part-head { gap: 12px; margin-bottom: 24px; }
.mobile .lib-part-head h2 { font-size: 22px; }
.mobile .lib-band { height: 40px; padding: 0 12px; font-size: 14px; }
.mobile .lib-band span { font-size: 11px; }
.mobile .lib-point-title { font-size: 17px; }
.mobile .lib-refs { font-size: 15px; }
.mobile .lib-point .lib-refs, .mobile .lib-norefs { margin-left: 0; }
.mobile .lib-group-h { font-size: 17px; }

/* ------------------------------------------------------------------
   Legal notice
   ------------------------------------------------------------------ */
.mobile .imprint { padding-bottom: 60px; }
.mobile .imprint .body { margin: 0 var(--mx); width: auto; padding-top: 56px; font-size: 17px; }
.mobile .imprint h1 { font-size: 30px; margin-bottom: 20px; }
.mobile .imprint p { margin-bottom: 18px; }

/* ------------------------------------------------------------------
   Entry views: the title under the back arrow, then everything in one column
   ------------------------------------------------------------------ */
/* z-index auto: as a flex item (audio page) the title would otherwise lie over the back and edit buttons and take their taps */
.mobile .detail-title { position: static; z-index: auto; padding: 56px 56px 0 var(--mx); }
.mobile .detail-title .sub { font-size: 15px; line-height: 1.45; margin-top: 4px; }

/* text (and its form): title, details, figure with caption, text */
.mobile .text-cols { flex-direction: column; align-items: stretch; gap: 0; padding: 56px var(--mx) 60px; }
.mobile .text-main { display: contents; }
.mobile .text-title { order: 1; font-size: 28px; }
.mobile .text-meta { order: 2; max-width: none; margin-top: 8px; }
.mobile .text-aside { order: 3; width: auto; margin: 22px 0 26px; }
.mobile .text-body { order: 4; margin-top: 0; font-size: 17px; }
.mobile .text-body p { margin-bottom: 20px; }
.mobile .text-figure { width: 100%; height: auto; aspect-ratio: 295 / 420; max-height: calc(var(--h) * .55); }
.mobile .rich h2 { font-size: 24px; margin: 36px 0 18px; }

/* audio: title, player, description */
.mobile .detail-audio:not(.edit-view) { flex-direction: column; justify-content: flex-start; }
.mobile .audio-player { position: static; width: auto; height: 300px; margin: 20px var(--mx) 0; }
.mobile .detail-audio:not(.edit-view) .audio-text { position: static; width: auto; min-height: 0; margin: 0; padding: 24px var(--mx) 60px; display: block; font-size: 17px; }
.mobile .audio-text p + p { margin-top: 18px; }

/* gallery: the image between the title and 104 above the bottom, then a line with caption, count,
   expand and next; the info button sits in the top right corner, its box opens over the image.
   The images stack in a one-cell grid here, so the buttons are placed from the stage (the page's top) */
.mobile .gallery-stage { left: 0; right: 0; top: 0; height: calc(var(--h) - 104px); }
.mobile .gallery-frame { position: static; display: grid; grid-template: 100% / 100%; width: auto; min-height: 0; margin: 12px var(--mx) 0; touch-action: pan-y; }
.mobile .gallery-image, .mobile .gallery-empty { position: static; grid-area: 1 / 1; min-height: 0; }
.mobile .gallery-info-btn { right: var(--mx); top: 14px; }
.mobile .gallery-next { right: var(--mx); top: calc(100% + 10px); }
.mobile .gallery-foot { left: var(--mx); right: calc(var(--mx) + 40px); top: calc(var(--h) - 92px); grid-template-columns: 1fr auto auto; gap: 14px; }
.mobile .gallery-caption { max-width: calc(var(--w) - 2 * var(--mx) - 130px); }
.mobile .gallery-count { margin-top: 2px; }
.mobile .gallery-foot .ext { margin-top: 3px; }
.mobile .gallery-info { left: var(--mx); width: calc(var(--w) - 2 * var(--mx)); top: calc(var(--gallery-top, 150px) + 12px); height: auto; padding: 18px 44px 18px 18px; }
.mobile .gallery-info .gallery-info-text { position: static; width: auto; }
.mobile .gallery-info .close-small { left: auto; right: 12px; top: 12px; }

/* ------------------------------------------------------------------
   Edit forms: one column in the page's order: title, details, figure or player, the text box,
   the related work, the references last
   ------------------------------------------------------------------ */
.mobile .edit-view .field-h1 { font-size: 26px; }
.mobile .edit-view .detail-title { margin: 56px var(--mx) 0; padding: 0; width: auto; }
.mobile .edit-view .text-cols { gap: 20px; padding-bottom: 0; }
.mobile .edit-view .text-aside { display: contents; }
.mobile .edit-view .text-figure, .mobile .edit-view .text-caption { order: 3; }
.mobile .edit-cols { flex-direction: column; align-items: stretch; padding: 16px var(--mx) 0; }
.mobile .edit-col-left, .mobile .edit-col-right { display: contents; }
.mobile .edit-view .rt, .mobile .edit-view .edit-panel.edit-info { order: 4; margin-top: 16px; }
.mobile .edit-view .edit-panel { order: 5; }
.mobile .edit-view .edit-panel.edit-player { order: 3; }
.mobile .edit-view .edit-panel.edit-refs { order: 6; }
.mobile .edit-gallery { margin: 16px var(--mx) 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mobile .edit-actions { gap: 8px; padding: 10px var(--mx); }
.mobile .edit-actions .btn-small { padding: 10px; font-size: 13px; }
.mobile .rt-body .rt-area { height: 320px; }

/* the fixed panels lie outside #stage: the window width tells them */
@media (max-width: 719px) {
  .review, .review.is-notes { left: 16px; right: 16px; width: auto; }
  .toast { max-width: calc(100% - 32px); }
}