/* ---------------------------------------------------------------
   THE SCREEN AROUND THE PAGE — page list, frame, findings list.
   The editor's surface INSIDE the frame is in edit.css; this here is the back office.

   🚨 IT BELONGS IN THE PACKAGE, BECAUSE OTHERWISE IT GETS COPIED, and it already had been:
   two projects carried the same 3036 characters byte for byte. At the third somebody would
   have copied it again, and then it would have been corrected in one place and not in two.
   This repo has already lived that story once with three copies of the same check.

   🚨 AND IT IS THE HALF WHOSE ABSENCE DOES NOT HURT BUT CONFUSES. An iframe without a height
   gets 150 pixels from the browser. Whoever builds the editor into a new project and forgets
   this file sees a stamp-sized box with a website in it and looks for the bug in the editor.
   Measured, not imagined.

   WHAT DOES NOT STAND HERE IS COLOUR. The rules reach for the names @foundry/admin sets and
   that EVERY back office fills with its own values (#37). A tone here would be one brand
   everybody shares.
   --------------------------------------------------------------- */

.fa-adm-pages,
.fa-adm-kinds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.fa-adm-pages li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.fa-adm-pages li > div {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.fa-adm-pages li > p {
  grid-column: 1;
  margin: 0;
}
.fa-adm-pages li > a {
  grid-row: 1 / span 2;
  grid-column: 2;
}

.fa-adm-kinds li {
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}
.fa-adm-kinds li:last-child {
  border-bottom: 0;
}
.fa-adm-kinds p {
  margin: 0;
}

/* --- „Seite bearbeiten" ------------------------------------------ */

.fa-adm-pages-buttons {
  display: flex;
  gap: 0.4rem;
  grid-row: 1 / span 2;
  grid-column: 2;
}

.fa-adm-edit-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.85rem;
}
.fa-adm-edit-head > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-inline-end: auto;
}

/* A group of buttons that is read together — "look and undo", "finish". It is the SEAM the
 * bar may break at; without it a row of seven siblings breaks wherever the room happens to
 * run out. */
.fa-adm-do {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* --- narrow ------------------------------------------------------
 *
 * Measured on a phone of 375 pixels, not imagined: the bar stood in FIVE lines, 225 pixels
 * tall, and the framed page — the actual tool — began at 439 of 812. One scrolled in order to
 * see what one was editing. */
@media (max-width: 640px) {
  /* Every group a whole line. That is the reason for the groups: the break now sits between
     two meanings instead of in the middle of the pair "↶ ↷". */
  .fa-adm-do {
    flex: 1 0 100%;
  }

  /* 🚨 AND THE BUTTONS FILL IT OUT. On a pointing device a button is as wide as its word; on
     a phone it is a target for a thumb, and "↶" at 41 pixels is not one. `1 1 auto` grows out
     of the EXISTING width, so it shares out the free room instead of making them all equally
     wide — the arrows stay arrows, "Veröffentlichen" stays the widest word in the line. */
  .fa-adm-do > .btn {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: 0.6rem;
    /* „Planen …" stood on two lines beside „Verwerfen" at 375 pixels: a word broken inside a button
       reads as two buttons. */
    white-space: nowrap;
  }

  /* The header may no longer push its room away: there is nothing left to push to the right
     here. */
  .fa-adm-edit-head > div:first-child {
    margin-inline-end: 0;
  }

  /*
   * 🚨 AND THE PAGE LIST BECOMES ONE COLUMN, BECAUSE OTHERWISE IT LIES ON TOP OF ITSELF.
   *
   * The row is a grid of `minmax(0, 1fr) auto`: text on the left, buttons on the right. At
   * 375 pixels "Ansehen" and "Bearbeiten" together need some 200 of them, the first column
   * falls to ~90 — and `minmax(0, …)` means it MAY. The sentence in it no longer wraps
   * sensibly, runs out of its column and disappears under the buttons. Nothing is cut off,
   * nothing reports itself: one thing simply stands on top of another.
   */
  .fa-adm-pages li {
    grid-template-columns: minmax(0, 1fr);
  }
  .fa-adm-pages-buttons {
    grid-row: auto;
    grid-column: 1;
  }
  .fa-adm-pages-buttons > * {
    flex: 1 1 auto;
  }
}

/* The frame with the real page in it.
 *
 * 🚨 It is DELIBERATELY tall. An editor in which one looks at a page through a window of 400
 * pixels is one in which nobody can judge whether a section is in the right place — and
 * framing the real page is done for exactly that. */
.fa-adm-frame {
  display: block;
  width: 100%;
  height: min(78vh, 1100px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* --- edit or arrange ----------------------------------------------
 *
 * Two buttons that belong together, and the pressed one says which applies. A single
 * toggle with one label would be shorter and would leave the OTHER state unsaid — here
 * both words stand there, and you do not have to flip the switch to learn what else there
 * is.
 *
 * 🚨 `aria-pressed` AND NOT COLOUR ALONE. Which of the two applies is the entire content
 * of this switch; saying it only through a fill would mean it is not there at all for a
 * screen reader — and that it disappears for anyone with a colour deficiency. */
.fa-adm-mode {
  display: inline-flex;
  gap: 0;
}
.fa-adm-mode .btn {
  border-radius: 0;
}
.fa-adm-mode .btn:first-child {
  border-start-start-radius: var(--radius);
  border-end-start-radius: var(--radius);
}
.fa-adm-mode .btn:last-child {
  border-start-end-radius: var(--radius);
  border-end-end-radius: var(--radius);
  margin-inline-start: -1px;
}
.fa-adm-mode .btn[aria-pressed="true"] {
  background: var(--accent, var(--surface-2, var(--surface)));
  color: var(--accent-fg, inherit);
  position: relative;
  z-index: 1;
}

/* --- the inspection ----------------------------------------------
 *
 * Folded away until somebody opens it: a list that always stands open is furniture by the
 * third time. On the button stands a NUMBER, and that is information every time — especially
 * when it gets smaller as one works. */
/* 🚨 THE `[hidden]` TRAP, and it kept this list open for its whole life. `[hidden] { display:
   none }` comes from the browser's stylesheet; the `display: grid` one rule below is author
   style and beats it. So the button dutifully set `hidden`, the list stayed visible, and the
   whole reasoning above it — "folded away until somebody opens it", "furniture by the third
   time" — described something that did not exist. @foundry/admin knows the trap and catches it
   three times (`.adm-scrim`, `.filefield-progress`, `.dialog-actions`); this file had missed
   it. Found on the phone, where a permanently open list takes the room the page needs. */
.fa-adm-check[hidden] {
  display: none;
}

.fa-adm-check {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2, var(--surface));
  display: grid;
  gap: 0.15rem;
  max-height: 15rem;
  overflow-y: auto;
}
.fa-adm-finding {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}
/* 🚨 A MARK AND NOT COLOUR ALONE. "Red means error" is no information for one man in twelve;
   the sign in front of it is one everybody reads. */
.fa-adm-finding::before {
  content: "·";
  color: var(--muted);
}
.fa-adm-finding-error::before {
  content: "!";
  color: var(--danger, #d05a5a);
  font-weight: 700;
}
.fa-adm-finding-error {
  color: var(--text);
}
.fa-adm-finding .btn-link {
  padding: 0.1rem 0;
  text-align: start;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.fa-adm-check-error {
  border-color: var(--danger, #d05a5a);
}

/* --- the sections of a page --------------------------------------
 *
 * The screen between "which pages are there" and "edit this section". It shows the ORDER,
 * because the order is what makes a page — and every row shows ITS section, so that "Vorher
 * und nachher" is not merely two words one has to remember.
 */

.fa-adm-sections {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fa-adm-section {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* Hidden means: the visitor does not see it. Pale, with the word beside it — the colour alone
   would be no information (see `.fa-adm-finding`). */
.fa-adm-section[data-hidden] .fa-adm-clip {
  opacity: 0.45;
}

.fa-adm-section-word > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.fa-adm-section-word p {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
}

.fa-adm-section-do {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/*
 * THE WINDOW ONTO THE SECTION.
 *
 * 🚨 A FULL-WIDTH FRAME, SCALED DOWN — and not a narrow frame. An iframe of 280 pixels IS a
 * phone: the site draws its phone layout into it, and the row would then show something that
 * stands nowhere on the page. So it is loaded at 1280 and scaled down with `transform`; what
 * one sees is the page.
 *
 * `transform-origin` top left, or it shrinks towards the middle and out of the box.
 */
.fa-adm-clip {
  position: relative;
  overflow: hidden;
  width: 16rem;
  height: 9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2, var(--surface));
  /* The content is decoration as far as the screen reader is concerned (see the `aria-hidden`
     on the frame) and must intercept nothing with the pointer either: the click belongs to the
     buttons beside it. */
  pointer-events: none;
}

/*
 * The box for a section the site does NOT draw — see `reconcile`.
 *
 * 🚨 A SENTENCE AND NOT AN EMPTY BOX. A grey patch where the page normally stands reads as
 * "still loading" or as a fault in the tool; it is the missing FOURTH state, and it is
 * spelled out here rather than drawn. No frame is loaded for it: the address would answer
 * with a 404.
 */
.fa-adm-clip-away {
  display: grid;
  place-items: center;
  padding: 0.75rem;
  border-style: dashed;
  text-align: center;
}
.fa-adm-clip-away p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted, inherit);
}

.fa-adm-clip-frame {
  position: absolute;
  inset: 0;
  border: 0;
  transform-origin: 0 0;
}

/* --- the page screen: the list beside the whole page ---------------
 *
 * 🚨 THE LARGE FRAME USED TO BE LOADED AND PUSHED OFF THE SCREEN (`[data-fa-quiet]`), because the
 * overview lives on what it reports and a frame with no box reports nothing. Now it is the
 * picture beside the list — the page as a visitor gets it, at the width chosen above it, drawn at
 * that width and scaled into the column (editor.js `lookPanel`), so a phone is a phone and not a
 * squeezed monitor. Beside the list from 75rem; below it on anything narrower.
 */
.fa-adm-split {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
.fa-adm-work {
  display: grid;
  gap: 1rem;
  align-content: start;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}
.fa-adm-look {
  min-width: 0;
}
.fa-adm-look-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}
.fa-adm-look-box {
  position: relative;
  overflow: hidden;
  height: min(70vh, 40rem);
  min-height: 20rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2, var(--surface));
}
.fa-adm-frame.fa-adm-frame-look {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  border: 0;
  border-radius: 0;
  transform-origin: 0 0;
}
@media (min-width: 75rem) {
  .fa-adm-split {
    grid-template-columns: minmax(22rem, 1fr) minmax(0, 1.15fr);
    align-items: start;
  }
  .fa-adm-look {
    position: sticky;
    top: 1rem;
  }
  .fa-adm-look-box {
    height: min(calc(100vh - 8rem), 68rem);
  }
  /* The list shares the width with the page now: a 16rem window, the words and four buttons in one
     row clipped „Bearbeiten" and stood „1 / 8" on end. The window gets smaller, the buttons go
     under the words. */
  .fa-adm-split .fa-adm-section {
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 0.5rem 0.75rem;
  }
  .fa-adm-split .fa-adm-clip {
    width: 9rem;
    height: 5.0625rem;
  }
  .fa-adm-split .fa-adm-section-do {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* A search result as the page's title and description would make it — beside the two fields. */
.fa-adm-snippet {
  margin: 1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.fa-adm-snippet figcaption {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.fa-adm-snippet-box {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.fa-adm-snippet-url {
  font-size: 0.8rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.fa-adm-snippet-title {
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--accent);
}
.fa-adm-snippet-text {
  font-size: 0.875rem;
  line-height: 1.45;
}

/* A plan: the dialog that asks when, and the line that says it stands. */
.fa-plan {
  display: grid;
  gap: 0.75rem;
}
.fa-plan-fields {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.fa-plan-note,
.fa-plan-hint {
  margin: 0;
}
.fa-plan-hint {
  font-size: 0.8125rem;
}
.fa-plan-note.bad {
  color: var(--bad);
}
.fa-adm-planned {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  font-size: 0.875rem;
}
.fa-page-panel-plan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: -0.25rem 0 0.75rem;
  font-size: 0.875rem;
}

/* --- the library: every page as it looks ---------------------------- */
.fa-library-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 0.75rem;
}
.fa-library-head .searchfield {
  flex: 0 1 18rem;
}
.fa-library-filters {
  margin: 0;
  flex-wrap: wrap;
}
.fa-library-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.fa-library-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.fa-library-card .adm-preview {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}
.fa-library-body {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: 0.75rem 0.85rem 0.85rem;
}
.fa-library-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.fa-library-title a {
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.fa-library-title a:hover {
  text-decoration: underline;
}
.fa-library-title .badge {
  flex: none;
  white-space: nowrap;
}
.fa-library-path {
  font-size: 0.8rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.fa-library-when {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.fa-library-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
.fa-library-more {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

/* The line between two sections out of which another one is added — the same action as the
   insert line in the frame, here as a row. Quiet until somebody looks. */
.fa-adm-insert {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.15rem 0;
  opacity: 0.55;
}
.fa-adm-insert:hover,
.fa-adm-insert:focus-within {
  opacity: 1;
}
.fa-adm-insert::before,
.fa-adm-insert::after {
  content: "";
  flex: 1;
  border-top: 1px dashed var(--line-strong);
}

.fa-adm-section-empty {
  list-style: none;
}

@media (max-width: 640px) {
  /* The window over the full width and the words below it: side by side there would be too
     little of either. The buttons get a line of their own, as in the page list. */
  .fa-adm-section {
    grid-template-columns: minmax(0, 1fr);
  }
  .fa-adm-clip {
    width: 100%;
    height: 8rem;
  }
  .fa-adm-section-do > .btn,
  .fa-adm-section-do > .menu-button {
    flex: 1 1 auto;
  }
}

/* A board in the stage's place — a section the page no longer has.
 *
 * It looks like an empty state and is one: the frame would otherwise stand in this spot. No
 * red and no exclamation mark — nothing is broken, it is merely not here. */
.fa-adm-board {
  display: grid;
  justify-items: start;
  gap: 0.6rem;
  padding: 1.5rem 0;
  max-width: 46rem;
}
.fa-adm-board h2 {
  margin: 0;
  font-size: 1.05rem;
}
.fa-adm-board p {
  margin: 0;
}

/* A narrow window edits at the phone width: the frame takes the whole stage, and under
   640 pixels the stage bleeds to the card's edge so the page is not a letterbox inside a
   letterbox. */
.fa-adm-frame-narrow {
  width: 100%;
  max-width: 100% !important;
}
@media (max-width: 640px) {
  .fa-adm-stage:has(> .fa-adm-frame-narrow) {
    margin-inline: -1rem; /* the card's padding */
  }
  .fa-adm-frame-narrow {
    border-radius: 0;
  }
}

/* ---------------------------------------------------------------
   The first-run card and the shortcut list — the two places the editor explains itself.
   --------------------------------------------------------------- */
.fa-adm-firstrun ol {
  margin: 0.5rem 0 1rem;
  padding-inline-start: 1.25rem;
}
.fa-adm-firstrun li + li {
  margin-top: 0.35rem;
}
.fa-adm-keys {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  margin: 0.25rem 0 1rem;
}
.fa-adm-keys dd {
  margin: 0;
}

/* The page card: title and description, with the counter under the description. */
.fa-adm-pagecard h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}
.fa-adm-count {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.fa-adm-releases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.fa-adm-releases li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}
.fa-adm-releases li > .btn {
  margin-inline-start: auto;
}
.fa-adm-count.bad {
  color: var(--danger, #d05a5a);
}

/* ---------------------------------------------------------------
   The page panel (admin/page-panel.js): a page's publication beside the record it belongs to —
   its state, the page drawn small, the buttons, and the earlier versions folded away.
   --------------------------------------------------------------- */
.fa-page-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
  margin: 0 0 0.75rem;
}
.fa-page-panel-head h2 {
  margin: 0;
  font-size: 1.05rem;
}
.fa-page-panel-state {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.fa-page-panel-when {
  margin: 0.6rem 0 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.fa-page-panel-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.fa-page-panel-history {
  margin-top: 0.9rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}
.fa-page-panel-history > summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--muted);
}
.fa-page-panel-history > :not(summary) {
  margin-top: 0.6rem;
}
.fa-page-panel-releases {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fa-page-panel-releases li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  font-size: 0.9rem;
}
.fa-page-panel-releases li > .btn {
  margin-inline-start: auto;
}