/*
 * comsolit_docs — the two flipbook modals.
 *
 * Hand-written plain CSS, no build. Replaces Foundation's Reveal component,
 * which this extension used for both dialogs and which came from
 * comsolit_t3base's stylesheet — the `legacy` cascade layer stgag/theme is
 * deleting (app repo open-issues #82).
 *
 * ⚠️ In Resources/Public/Css/, NOT Resources/Public/stylesheets/. The latter is
 * the gulp SCSS build's output directory (`scss.build` in gulp.config.json);
 * hand-written CSS filed there is indistinguishable from a build artifact and at
 * the mercy of whatever the shared sass task does to its destination.
 *
 * ⚠️ Every value below was MEASURED off production with the modal in the DOM,
 * not read out of Foundation's source. Foundation's rem values resolve against
 * the legacy layer's `html { font-size: 105% }`, so `1rem` of padding is 16.8px
 * on screen and copying `1rem` into an unlayered rule would drift the moment
 * that 105% goes.
 *
 * The elements are now native <dialog>, so:
 *   - `.reveal-overlay` (position fixed, rgba(10,10,10,.45), z-index 1005)
 *     becomes ::backdrop, which the browser paints and manages.
 *   - showModal() handles focus trapping, inertness of the rest of the page,
 *     Escape-to-close and the top layer. Foundation emulated all of that in JS.
 */

/* ---------------------------------------------------------------------------
 * Shared
 * ⚠️ A <dialog> defaults to `max-width: calc(100% - 6px - 2em)` and an
 * equivalent max-height, plus a 2px solid border and 1em padding from the UA
 * stylesheet. All four have to be neutralised or the measured geometry cannot be
 * reproduced.
 */
.cd-modal {
  padding: 0;
  border: 0;
  max-width: none;
  max-height: none;
  background: transparent;
  color: inherit;
}

.cd-modal::backdrop {
  background-color: rgb(10 10 10 / 0.45);
}

/* ---------------------------------------------------------------------------
 * The "how do you want to open this?" dialog.
 * Measured: position relative, top 100px, width 600px, max-width 1377.6px,
 * margin 0 auto, padding 16.8px 0, white, 1px solid #d5d6da, radius 0,
 * overflow-y auto.
 */
.cd-modal--selection {
  position: fixed;
  top: 100px;
  width: 600px;
  max-width: min(1377.6px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 16.8px 0;
  border: 1px solid var(--color-border, #d5d6da);
  border-radius: 0;
  background-color: var(--color-surface, #fff);
  overflow-y: auto;
}

.cd-modal__header {
  padding: 0 16.8px;
}

/*
 * ⚠️ Absolutely positioned, NOT a flex item in the header. Foundation's
 * `.close-button` is `position: absolute; right: 1rem; top: .5rem` against the
 * modal, and the dialog is `position: fixed`, so it is already the containing
 * block. Measured on production: right 16.8px, top 8.4px, font-size 33.6px,
 * line-height 33.6px, colour #5c5c5d, no border, transparent, no padding.
 */
.cd-modal__close {
  position: absolute;
  right: 16.8px;
  top: 8.4px;
  z-index: 10;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text, #5c5c5d);
  font-size: 33.6px;
  line-height: 1;
  cursor: pointer;
}

.cd-modal__close:hover,
.cd-modal__close:focus-visible {
  color: #0a0a0a;
}

/* The two choices: normal PDF / browsable PDF. Foundation put each in a
   `small-30 columns` half of a 60-column row. */
.cd-modal__choices {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 0 16.8px;
}

.cd-modal__choice {
  box-sizing: border-box;
  width: 50%;
  padding: 0 15px;
}

/*
 * The choice tile.
 *
 * ⚠️ These are NOT buttons, despite production putting `class="button"` on them:
 * Foundation's `.reveal.selection-reveal … > a` rule overrode the button
 * appearance completely, turning it into a grey card with a large icon. That
 * rule was scoped under `.reveal`, which the <dialog> no longer carries, so the
 * generic green `.button` won and the tiles rendered as two green blocks. The
 * `button` class is therefore dropped from the markup and the tile stated in
 * full here.
 *
 * Every value measured off production: 252px tall (Foundation's 15rem against
 * the legacy layer's inflated root), #ebebeb, colour #5c5c5d, column flex,
 * centred, padding 12.852px 15.12px, margin-bottom 16.8px, 1px transparent
 * border, font-size 15.12px.
 */
.cd-modal__choice > a {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 252px;
  box-sizing: border-box;
  margin: 0 0 16.8px;
  padding: 12.852px 15.12px;
  border: 1px solid transparent;
  border-radius: 0;
  background-color: #ebebeb;
  color: var(--color-text, #5c5c5d);
  font-size: 15.12px;
  text-align: center;
  text-decoration: none;
  /* Foundation's `.button` carried this; the tiles lost it with that class. */
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
}

.cd-modal__choice > a:hover,
.cd-modal__choice > a:focus-visible {
  background-color: var(--color-action, #67b021);
  color: var(--color-on-action, #fff);
}

.cd-modal__choice > a:hover svg,
.cd-modal__choice > a:focus-visible svg {
  fill: var(--color-on-action, #fff);
}

/* The glyph takes 80% of the tile; the label sits under it. */
.cd-modal__choice > a .icon {
  display: block;
  height: 80%;
  width: auto;
}

/*
 * ⚠️ `margin-inline: auto` is required, and only under this theme. Production
 * leaves the glyph as an INLINE svg, which the tile's `text-align: center`
 * centres for free. stgag_theme loads Tailwind's preflight, which sets
 * `svg { display: block }` globally — and a block-level svg ignores
 * `text-align`, so the icon sat 38px left of centre. Centre it explicitly rather
 * than relying on an inline default this theme does not have.
 */
.cd-modal__choice > a .icon > svg,
.cd-modal__choice > a svg {
  display: block;
  height: 80%;
  width: auto;
  margin-inline: auto;
  fill: var(--color-text, #5c5c5d);
}

/* ---------------------------------------------------------------------------
 * The flipbook dialog.
 * Measured: position fixed, inset 0, 100% x 100%, min-height 100%,
 * padding 67.2px 16.8px, background rgba(10,10,10,.45), no border,
 * overflow-y hidden.
 *
 * ⚠️ The translucent dark background is on the DIALOG itself, not only the
 * backdrop — Foundation's `.reveal.full` is what dims the page here, and the
 * book sits on top of it. Dropping it because ::backdrop looks similar would
 * lose the dimming behind the toolbar and thumbnails.
 */
.cd-modal--full {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 67.2px 16.8px;
  border: 0;
  background-color: rgb(10 10 10 / 0.45);
  overflow-y: hidden;
}

.cd-modal--full .cd-modal__close-row {
  text-align: right;
}

/* ---------------------------------------------------------------------------
 * wowBook inside the dialog.
 *
 * ⚠️ These three rules exist in comsolit_t3base's stylesheet scoped to
 * `.flipbook-content-reveal`, and on production they win on specificity:
 * `.flipbook-content-reveal .wowbook-toolbar` (0,2,0) beats wow_book.css's own
 * `.wowbook-toolbar` (0,1,0).
 *
 * Under stgag_theme they do NOT win. That stylesheet is bundled into the
 * `legacy` cascade layer, and wow_book.css is registered by this extension as an
 * ordinary unlayered stylesheet — and unlayered CSS beats every layered rule
 * regardless of specificity. So the toolbar fell back to wow_book.css's
 * `position: relative` and rendered ABOVE the pages instead of pinned to the
 * bottom of the viewport. That is open-issues #81, of which this is a concrete
 * instance rather than anything the <dialog> port introduced.
 *
 * Restated here, in this extension's own unlayered stylesheet, where they win
 * again — and where they survive the deletion of the legacy layer.
 *
 * ⚠️ wowBook PREPENDS its toolbar to `toolbarParent`, so DOM order puts it
 * first; only `position: fixed; bottom: 0` puts it under the book. Production
 * has exactly the same DOM order — [toolbar, close-row, book] — which is why
 * reordering the markup would have been the wrong fix.
 */
.flipbook-content-reveal .wowbook-toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.flipbook-content-reveal .wowbook {
  margin: 0 auto;
}

.flipbook-content-reveal .wowbook-back {
  z-index: 100;
}