/* issue.css (magazine) — the sheet of the package ISSUES AND SEARCH (design package S3:
   docs/design-kickoff/S3_BAUVORLAGE.md): the page of an issue — the motif in its head, the box of
   the editorial, the section of the flipbook, "more issues" — and the page of the search with the
   groups of its hits. (The flipbook itself keeps its rules in app.css, in the block "The flipbook".)

   Load order in the magazine's layout: tailwind.css → the platform's components.css and shell.css →
   the magazine's components.css (the blocks its pages share) → article.css, THIS file, shows.css →
   app.css. The admin has its own layout and loads none of them.

   ⚠️ Loaded on EVERY page of the magazine, like the two sheets beside it. So:
   - every block is named `mag-…` (a colour version of the platform's pill `pill-…`), and a name
     belongs to ONE sheet: none that components.css or another package uses;
   - a block of components.css is restyled only under a class of this package, never by its bare
     name — that would change it on every page;
   - colours only as var(--mn-…): a colour without a name gets one in tailwind.base.js.

   How LARGE the blocks are built stands in ONE place: the block "The scale" right below, in the
   form of components.css — the phone's and the tablet's values on the root, what differs from 1024
   in one media query, in whole pixels, each under a name `--mag-…` that no other sheet defines. A
   rule further down says `var(--mag-…)` where it sets a size; it may read a name of components.css
   as well. Never `--atom-…` or `--mn-size-…` (mineralica/tests/test_scale.py).

   Held by magazine/tests/test_issue_sheet.py (its table SIZES says what stands here) through
   magazine/tests/sheet_rules.py, and with the other sheets by test_package_sheets.py. */

/* ---------- The scale ---------- */
/* The sizes of this package's blocks, named in ONE place. Built is "Stufe C" — about three quarters
   of what the frames draw; every line says what the frame draws. */
:root {
  /* The head of an issue's page (Figma 5438:8099). Everything else of it is the head band's
     (components.css: its padding, how wide the words run, the distance above the buttons). */
  --mag-motif: 200px;                                        /* how HIGH the issue lying open stands — drawn a
                                                                montage of about 415 × 337; ONE picture is built,
                                                                wider and flatter, so it is sized by its height */

  /* The editorial's box (5438:8162). */
  --mag-editorial-pad: 16px;                                 /* inside the box, above and below — drawn 32 */
  --mag-editorial-side: 16px;                                /* … and at its sides — drawn 48 */
  --mag-editorial-gap: 16px;                                 /* photo · words — drawn 40 */
  --mag-editorial-photo: 88px;                               /* how WIDE the photo stands, upright as printed
                                                                (0.733 : 1) — drawn a round placeholder of 144 */
  --mag-editorial-read: 680px;                               /* how wide the text runs, closed and opened — not
                                                                drawn; at the box's 912 a line had about 150 letters */

  /* The head of the search (5395:4333). Its paddings and the distance of its lines are the head
     band's and the section's (components.css). */
  --mag-find-field: 480px;                                   /* how wide the field stands, from 768 — drawn 640 */
  --mag-find-glyph: 18px;                                    /* its magnifier — drawn 24 */

  /* A group of hits (5395:4350 an issue, 5398:4292 an online article). */
  --mag-hit-pad: 20px;                                       /* above and below a group — drawn 40 */
  --mag-hit-col: 72px;                                       /* how WIDE its picture stands: the cover, the
                                                                article's square — drawn 170 */
  --mag-hit-gap: 16px;                                       /* picture · words — drawn 56 */
  --mag-hit-apart: 16px;                                     /* the group's head · an article · the next — drawn 32 */
  --mag-hit-page: 48px;                                      /* the column of the page number — drawn 56;
                                                                "S. 76" in 16 medium is about 41 wide */
}
@media (min-width: 1024px) {
  :root {
    --mag-motif: 260px;
    --mag-editorial-pad: 24px;
    --mag-editorial-side: 36px;
    --mag-editorial-gap: 28px;
    --mag-editorial-photo: 108px;
    --mag-hit-pad: 28px;
    --mag-hit-col: 128px;
    --mag-hit-gap: 40px;
    --mag-hit-apart: 24px;
  }
}

/* ---------- Issue page: the head ---------- */
/* The head of an issue's page is the head band of components.css (`.mag-head--tint`: the mark, the
   title, the hook, the buttons, the line below them — _issue_head.html) with two parts of its own.

   The facts — "DE/EN · Sep 2026 · 68 pages · 4 articles" — are the meta row with a divider between
   two of them, as drawn here and nowhere else. A divider is the fact's own left edge, as high as
   the row's line, so it needs no size of its own; the row's gap and a padding of the same size
   keep it in the middle. From 768 only: on a phone the four facts take two lines, and the second
   would begin with a loose stroke. The row keeps the distance of the buttons above it, set the way
   the band sets theirs — one value for both, where three quarters of the drawn 32 would be 24. */
.mag-specs { margin-top: var(--mag-head-cta); }
@media (min-width: 768px) {
  .mag-specs > li + li { padding-left: var(--mag-meta-apart); border-left: 1px solid var(--mn-gray-800); }
}
/* The issue lying open on a spread, without a ground (decision S3-6) — or, where an issue has none,
   its standing cover with the shadow of `.mag-cutout`. Sized by its HEIGHT like the address that
   asks for it (one axis: two would crop a cut-out). ⚠️ No box around it: no ground, no radius, no
   box shadow — they would follow the picture's rectangle, and its corners are see-through. */
.mag-motif { height: var(--mag-motif); width: auto; max-width: none; }

/* ---------- Issue page: the editorial ---------- */
/* The editorial of page 3 as a box with an excerpt (5438:8162, decisions S3-4, S3-5;
   _issue_editorial.html): a band of its own right under the head, on the same tinted ground — the
   head's lower padding is the distance above the box. White, a hairline, the radius of a box, NO
   shadow. The photo stands upright as printed, with rounded corners.

   From 768 the photo is the first column and the words the second, both in the middle of the
   box's height. Below that the photo stands beside the line over the title and the title only;
   excerpt, button and signature run over the whole width of the box — the column of words is
   dissolved into the box's grid (`display: contents`), so its three parts can be placed one by one.
   Without a photo the box has one column and the words fill it: no grey place for a missing picture.

   Opened (`data-open`, set by issue.js): photo and words at the top, the salutation above the
   excerpt, the rest below, paragraphs 12 apart. Nothing here shortens the text — how long the
   excerpt is, the rule decides (issue_view.editorial_parts).
   ⚠️ No type size in this sheet: the steps and the text scale are classes in the markup. */
.mag-editorial { padding-bottom: var(--mag-section); background: var(--mn-gray-75); }
.mag-editorial__box {
  display: grid; grid-template-columns: var(--mag-editorial-photo) minmax(0, 1fr);
  align-items: center; column-gap: var(--mag-editorial-gap);
  padding: var(--mag-editorial-pad) var(--mag-editorial-side);
  background: var(--mn-surface); border: 1px solid var(--mn-gray-200); border-radius: var(--rounded-box);
  /* Closed again from far down a long text, issue.js brings the box's beginning back into the window. */
  scroll-margin-top: var(--mag-gap);
}
.mag-editorial__box--plain { grid-template-columns: minmax(0, 1fr); }
.mag-editorial__box[data-open] { align-items: start; }
.mag-editorial__photo { width: var(--mag-editorial-photo); height: auto; border-radius: var(--rounded-box); }
.mag-editorial__body { display: contents; }
.mag-editorial__head { min-width: 0; }
/* The line over the title, in capitals by CSS (the markup keeps the words as they are written). */
.mag-editorial__kicker { margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--mn-green-700); }
.mag-editorial__text { grid-column: 1 / -1; max-width: var(--mag-editorial-read); margin-top: 12px; color: var(--mn-gray-900); }
/* Closed, two paragraphs of an excerpt stand 6 apart — and so does the excerpt below a salutation
   that is SHOWN (an excerpt that is the whole text: see the template; behind a hidden one it keeps
   its place right under the title). Opened, every paragraph 12. */
.mag-editorial__text > :not([hidden]) + *, .mag-editorial__lead > p + p { margin-top: 6px; }
.mag-editorial__box[data-open] .mag-editorial__text > * + *,
.mag-editorial__box[data-open] .mag-editorial__text p + p { margin-top: 12px; }
/* In five of the eight German issues the sentence after the salutation continues it and begins
   small ("Liebe Leserinnen und Leser, / in Gesprächen über unser Hobby …"). While the salutation is
   out of sight the excerpt begins with a capital; opened, the sentence stands as it is printed.
   The stored text is never touched. */
[hidden] + .mag-editorial__lead > p:first-child::first-letter { text-transform: uppercase; }
/* The foot: the button that unfolds the text and the name of who signs it, in one line. */
.mag-editorial__foot {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: var(--mag-gap); row-gap: 6px; margin-top: 12px;
}
/* The button is the platform's link atom on a <button> (its class in the markup): one line of 21,
   enlarged to 37 for a finger at the element itself — a padding taken back by a margin.
   ⚠️ The atom sets a `display`, in a sheet loaded after the build: without the rule below the
   attribute `hidden` would lose, and the button stood there before issue.js has run — or without
   JavaScript at all, where it does nothing. */
.mag-editorial__toggle { padding: 8px 0; margin: -8px 0; }
.mag-editorial__toggle[hidden] { display: none; }
.mag-editorial__toggle:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
/* Who signs it: in the serif, upright — drawn in italics, but only the upright cut of the typeface
   is delivered, and the browser's slanted stand-in is no italic. A link where the author has a
   page, with a target of 36 that does not make the line higher (an inline box's padding). */
.mag-editorial__name { color: var(--mn-gray-800); }
.mag-editorial__name a { padding: 8px 0; }
.mag-editorial__name a:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
@media (min-width: 768px) {
  .mag-editorial__body { display: block; min-width: 0; }
  /* Under the title in the column of words, no longer under the photo's row. */
  .mag-editorial__text { margin-top: 6px; }
}
@media (min-width: 1024px) {
  .mag-editorial__foot { margin-top: 10px; }
}
@media (hover: hover) {
  .mag-editorial__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* ---------- Issue page: the flipbook's section ---------- */
/* A heading and one sentence over the flipbook (5438:8252, decision S3-2). The section's distances
   are `.mag-section`'s, the head's distance to the field `.mag-section__head`'s; the field itself —
   dark ground, bar, the row below it — is drawn by the viewer (app.css, "The flipbook"). */
.mag-reader__note { margin-top: 6px; color: var(--mn-gray-800); }

/* ---------- Issue page: more issues ---------- */
/* The tinted band at the end of an issue's page (5438:8260, decision S3-N2): a section head and two
   teasers of an issue. As the LAST child of <main> it reaches the foot (shell.css) — which is why
   nothing may follow it there, not even a script. */
.mag-more-issues { padding-top: var(--mag-section); padding-bottom: var(--mag-section); background: var(--mn-gray-75); }

/* ---------- Search: the head ---------- */
/* The tinted band of the page of the search (5395:4333, the states 5395:4738 and 5395:4755;
   _search_head.html): the title, the search row and ONE line that says the state. A band of its
   own and not the head band of components.css — that one is a row of words and a picture with a
   least height, this one is a column without a picture. It reads the head band's padding, so the
   title of this page stands as far below the header as an issue's.

   The field is the platform's field atom on a HULL, as in the search row of the issue overview
   (components.css, "Search row"): the atom gives height (48), border, radius and the green edge
   while the field has the focus; this sheet only arranges what is in it. The magnifier is
   decoration here — the button stands beside the field, with its word. The field's type stays 16
   (the atom's): below that Safari on a phone zooms into it on focus.
   ⚠️ The room at the right is the FIELD's padding, not the hull's: a click there has to land in
   the <input>.
   The button is the platform's atom, 44 high everywhere else. In THIS row it is as high as the
   field it stands beside (drawn so): free beside it, the two differed by 4 px. The value is the
   atom's own, read and never set — the rule the platform keeps for a button JOINED to a field.

   Below 768 the button stands under the field, both as wide as the grid; from 768 beside it. */
.mag-find { padding-top: var(--mag-head-pad); padding-bottom: var(--mag-head-pad); background: var(--mn-gray-75); }
.mag-find__inner { display: flex; flex-direction: column; gap: var(--mag-section-head); }
.mag-find__form { display: flex; flex-direction: column; gap: 12px; }
.mag-find__field { gap: 8px; padding-left: 12px; padding-right: 0; }
.mag-find__glyph { flex: none; color: var(--mn-gray-600); }
.mag-find__glyph .icon, .mag-find__glyph svg { width: var(--mag-find-glyph); height: var(--mag-find-glyph); }
.mag-find__input { flex: 1; align-self: stretch; min-width: 0; padding-right: 12px; }
.mag-find__submit { height: var(--atom-field); min-height: var(--atom-field); }
/* The line below the row. The sum: its number in the darkest tone, the rest quieter. "No matches
   for …": all of it dark, and a term of any length breaks where the line ends — it is whatever
   somebody typed. Every other sentence quiet. */
.mag-find__note, .mag-find__sum { color: var(--mn-gray-700); }
.mag-find__none { color: var(--mn-gray-900); overflow-wrap: anywhere; }
.mag-find__sum strong, .mag-find__none strong { font-weight: 600; color: var(--mn-gray-900); }
/* The way back to every issue is the platform's link atom (its class in the markup), one line of
   21 — enlarged to 37 for a finger at the element itself, a padding taken back by a margin. */
.mag-find__all { padding: 8px 0; margin: -8px 0; }
.mag-find__all:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
@media (min-width: 768px) {
  .mag-find__form { flex-direction: row; align-items: center; }
  .mag-find__field { flex: 0 1 var(--mag-find-field); }
}

/* ---------- Search: the groups of hits ---------- */
/* The matches of ONE issue or of ONE online article (5395:4350, 5398:4292; _search_hits.html): the
   picture at the left, at the right the group's head — title and facts, the number of its matches
   — and below that where the term stands: per article of an issue its pages, each with up to
   three snippets; for an online article up to three excerpts. Between two groups a hairline over
   the width of the grid. No picture of a page (decision S3-9), no ground, no shadow but the
   cut-out's own.

   A group is a grid of the picture's column and the words. From 768 the words are ONE column
   beside the picture. Below that only the head stands beside it — title, facts and, under them,
   the number — and everything else runs over the whole width: the column of words is dissolved
   into the group's grid (`display: contents`), so its parts can be placed one by one.
   ⚠️ No type size in this sheet: the steps and the text scale are classes in the markup. */
.mag-hits { padding-top: 12px; padding-bottom: var(--mag-section-end); }
.mag-hit {
  display: grid; grid-template-columns: var(--mag-hit-col) minmax(0, 1fr); align-items: start;
  column-gap: var(--mag-hit-gap); padding-top: var(--mag-hit-pad); padding-bottom: var(--mag-hit-pad);
}
.mag-hit + .mag-hit { border-top: 1px solid var(--mn-gray-300); }
.mag-hit__picture { grid-column: 1; grid-row: 1; }
/* An issue's cover as wide as the column: the cut-out (its shadow is `.mag-cutout`, and nothing
   draws a box around it — its corners are see-through), else the photo on white with the radius
   of a box, else a tinted sheet. An online article's picture is its square; without a cover the
   square stays, tinted. */
.mag-hit__cover { width: var(--mag-hit-col); height: auto; }
.mag-hit__photo { border-radius: var(--rounded-box); }
.mag-hit__square {
  display: block; width: var(--mag-hit-col); height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--rounded-box);
}
.mag-hit__sheet { display: block; width: var(--mag-hit-col); aspect-ratio: 7 / 10; border-radius: 2px; }
.mag-hit__blank { background: var(--mn-gray-200); }
.mag-hit__body { display: contents; }
/* The head: what the group is, and how many matches it has. Below 768 the number stands under the
   facts; from 768 at the right — at the foot of an issue's head, at the top of an online article's,
   level with the line over its title. ⚠️ `min-width: 0` on the words: an item of a row, and by
   itself as wide as its longest word. */
.mag-hit__head {
  grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-width: 0;
}
.mag-hit__name { min-width: 0; }
.mag-hit__facts { margin-top: 8px; }
.mag-hit__count { color: var(--mn-gray-700); }
/* A title is a link in the colour of the text: an issue's to its page, an article's to the
   article. Its target reaches 8 above and below the letters without making the line higher (an
   inline box's padding). */
.mag-hit__link { padding: 8px 0; }
.mag-hit__link:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
/* The line over an online article's title, as over a teaser's: where it appeared, in capitals by
   CSS (the markup keeps the words as they are written), and when — not in capitals. */
.mag-hit__kicker {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 2px;
  margin-bottom: var(--mag-section-head);
}
.mag-hit__mark { font-weight: 600; color: var(--mn-show-week); text-transform: uppercase; letter-spacing: 1.2px; }
.mag-hit__date { display: inline-flex; align-items: center; gap: var(--mag-meta-gap); font-weight: 500; color: var(--mn-gray-700); }
.mag-hit__date .icon, .mag-hit__date svg { flex: none; width: var(--mag-meta-glyph); height: var(--mag-meta-glyph); }
/* A piece: an article of the issue with its pages — or "other pages of the issue", a label in the
   text scale and no headline step. */
.mag-hit__piece { grid-column: 1 / -1; min-width: 0; margin-top: var(--mag-hit-apart); }
/* An online article's excerpts follow its own head — title and byline stand there — at the
   distance of a byline to its lines, not at the distance of one article to the next. */
.mag-hit--online .mag-hit__piece { margin-top: 0; }
.mag-hit__by { margin-top: 4px; color: var(--mn-gray-700); }
.mag-hit__label { color: var(--mn-gray-700); }
.mag-hit__rows { margin-top: 10px; }
/* A page: its number — the line's ONE link, into the flipbook at that page —, the snippets, and at
   the far right the mark of a page a guest cannot read. Everything at the top of the line.
   The number is a target of 36 at the element itself (its line of 24, a padding taken back by a
   margin) and at least as wide as its column. A snippet breaks where the line ends; the words the
   term matched are darker and heavier, without a ground. Hover and focus at the link only. */
.mag-hit__row {
  display: flex; align-items: flex-start; gap: var(--mag-gap); padding: 10px 0;
  border-top: 1px solid var(--mn-gray-200);
}
.mag-hit__page {
  flex: none; min-width: var(--mag-hit-page); padding: 6px 0; margin: -6px 0; white-space: nowrap;
  color: var(--mn-green-600); text-decoration: underline; text-underline-offset: 3px;
  font-variant-numeric: tabular-nums;
}
.mag-hit__page:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
.mag-hit__lines { flex: 1; min-width: 0; color: var(--mn-gray-800); overflow-wrap: break-word; }
/* Two snippets of a page: 2 apart where each is one line (from 768, as drawn) — 6 on a phone,
   where a snippet takes two or three lines and the next one would read as its continuation. */
.mag-hit__lines > p + p { margin-top: 6px; }
.mag-hit__lines strong { font-weight: 600; color: var(--mn-gray-900); }
/* The mark with the lock, in the meta row's type (drawn in gray 600 — 4.3 : 1 at 13 px, so built
   one step darker). 3 down: its line of 18 in the middle of the snippet's first line of 24. Below
   768 it is the lock alone (the word is hidden by utilities in the markup, and stays for a screen
   reader). */
.mag-hit__lock {
  flex: none; display: inline-flex; align-items: center; gap: var(--mag-meta-gap); margin-top: 3px;
  font-size: var(--mag-meta-size); line-height: var(--mag-meta-line); font-weight: 500; color: var(--mn-gray-700);
}
.mag-hit__lock .icon, .mag-hit__lock svg { flex: none; width: var(--mag-meta-glyph); height: var(--mag-meta-glyph); }
/* The line that closes a group which is not shown whole — "all n pages with matches in this
   issue", "n more matches in this article": a hairline like a page's, and the platform's link
   atom with an arrow (its class in the markup), enlarged to 37 for a finger like the head's link. */
.mag-hit__more { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--mn-gray-200); }
.mag-hit__all { padding: 8px 0; margin: -8px 0; }
.mag-hit__all:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }
@media (min-width: 768px) {
  .mag-hit__body { display: block; grid-column: 2; min-width: 0; }
  .mag-hit__head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: var(--mag-gap); }
  .mag-hit--online .mag-hit__head { align-items: flex-start; }
  .mag-hit__name { flex: 1; }
  .mag-hit__count { flex: none; }
  .mag-hit__lines > p + p { margin-top: 2px; }
}
@media (hover: hover) {
  .mag-hit__link:hover { text-decoration: underline; text-underline-offset: 3px; }
  .mag-hit__page:hover { color: var(--mn-green-700); }
}

/* ---------- Hidden stays hidden ---------- */
/* This sheet loads after tailwind.css: a `display` set above beats the build's hiding class and the
   attribute `hidden` (same weight, later file). Said again for every block that sets one.
   ⚠️ Only these two spellings: a block that is to be hidden at ONE width keeps its `display` and
   stays visible — it is hidden through an element around it (docs/DESIGN_BUILD_GUIDE.md §6). */
.mag-editorial__box[hidden], .mag-editorial__box.hidden, .mag-editorial__body[hidden], .mag-editorial__body.hidden,
.mag-editorial__foot[hidden], .mag-editorial__foot.hidden,
.mag-find__inner[hidden], .mag-find__inner.hidden, .mag-find__form[hidden], .mag-find__form.hidden,
.mag-hit[hidden], .mag-hit.hidden, .mag-hit__square[hidden], .mag-hit__square.hidden,
.mag-hit__sheet[hidden], .mag-hit__sheet.hidden, .mag-hit__body[hidden], .mag-hit__body.hidden,
.mag-hit__head[hidden], .mag-hit__head.hidden, .mag-hit__kicker[hidden], .mag-hit__kicker.hidden,
.mag-hit__date[hidden], .mag-hit__date.hidden, .mag-hit__row[hidden], .mag-hit__row.hidden,
.mag-hit__lock[hidden], .mag-hit__lock.hidden { display: none; }