/**
 * @file overlay.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description A page laid over the page (components/Overlay.js): the whole window on the page's
 *   ground, the bar across the top, the body that alone scrolls, and with a rail the two columns of
 *   the page and its contents rail. The values are the app catalogue's (#detail-view, .dtl-toolbar,
 *   .dtl-body, .dtl-page, .dtl-rail; #iframe-view, .iframe-toolbar, #app-iframe in
 *   src/static/app-catalog/styles). Colours, frames and corners read the theme's tokens.
 *   The catalogue's own names map to the site's tokens so: its --surface is --card-bg, its --border
 *   is --border, its --text-dim is --text-muted and its --text-muted is --text-dim.
 * @version-history
 *   v1.3.0 — 2026-10-18 — .overlay--below-bar: the layer starts under the top bar and lifts the bar's
 *     dropdowns over it.
 *   v1.2.1 — 2026-09-27 — The way back's literal corner 0 goes (nothing under it draws a corner, so
 *     AIMEAT is unchanged). check:shape-tokens.
 *   v1.2.0 — 2026-09-27 — .overlay--small-words (Overlay smallWords): the small action links at the
 *     catalogue's .78rem in the body face; additive.
 *   v1.1.0 — 2026-09-27 — Parity with the app catalogue: the close button (.overlay-close), the
 *     thing's glyph and the pencil in the title (.overlay-glyph, .overlay-edit), the way back
 *     (.overlay-back), the pill link (.overlay-link), the browser's line height
 *     (.overlay--normal-leading), the viewer's glass bar (.overlay--fill), the bar on the card ground,
 *     the phone body without the 80px foot.
 *   v1.0.0 — 2026-09-27 — Initial (appcat).
 */

.overlay {
  position: fixed; inset: 0; z-index: 600;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
}
/* Under the site's top bar, not over it (Overlay belowBar): signing in and out stay in reach. The bar
   is lifted over the layer while one is open, so its own dropdowns (notifications, the narrow
   screen's menu) open on top of it rather than behind it. */
.overlay--below-bar { top: var(--nav-height, 56px); }
body:has(.overlay--below-bar) .topnav { z-index: 601; }
/* The browser's own line height, which the app catalogue's page read at (Overlay normalLeading). */
.overlay--normal-leading { line-height: normal; }
/* The catalogue's quiet word (Overlay smallWords): a small action link a step smaller, in the body
   face (.dtl-btn, .78rem). The tones that set their own size keep it. */
.overlay--small-words .poster-action--small:not(.poster-action--row):not(.poster-action--lower):not(.poster-action--text):not(.poster-action--plain):not(.poster-action--quiet) {
  font-family: var(--font-body); font-size: .78rem;
}

.overlay-bar {
  flex: 0 0 auto; box-sizing: border-box; height: 56px;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 24px;
  background: var(--card-bg, var(--bg));
  border-bottom: 1px solid var(--border);
}
/* The close button: a thin framed square (the catalogue's .icon-btn in its detail toolbar). */
.overlay-close {
  flex: 0 0 auto; box-sizing: border-box; width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--card-bg); color: var(--text);
  font-family: inherit; font-size: 1.2rem; line-height: inherit; cursor: pointer; user-select: none;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.overlay-close:hover { transform: translateY(-1px); }
.overlay-close:active { transform: translateY(0); }
.overlay-title {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-body); font-weight: 800; font-size: .95rem; color: var(--text);
}
.overlay-glyph { font-size: 1.3rem; }
/* The pencil into the thing's editor: a quiet mark, whole under the pointer (.rename-pencil). */
.overlay-edit {
  background: none; border: 0; padding: 0 2px; cursor: pointer;
  font-family: inherit; font-size: 1rem; line-height: 1; vertical-align: middle; opacity: .5;
  transition: opacity .25s cubic-bezier(.16, 1, .3, 1);
}
.overlay-edit:hover { opacity: 1; }
.overlay-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
/* The pill link at the bar's end (.aimeat-cta): it opens in a new tab. */
.overlay-link {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-full);
  font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  color: var(--text); background: color-mix(in srgb, var(--card-bg) 85%, transparent);
  border: 1px solid var(--border); transition: all .15s;
}
.overlay-link:hover { border-color: var(--accent); color: var(--accent); }
.overlay-link-mark { color: var(--accent); }

.overlay-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 40px 44px 80px;
  font-family: var(--font-body);
}
/* One thing edge to edge (the framed app): no padding, no scroll of its own. */
.overlay-body--fill { display: flex; padding: 0; overflow: hidden; }
/* No ground of its own: a framed page without one shows the layer's ground, as #app-iframe did. */
.overlay-body--fill > iframe { flex: 1 1 auto; width: 100%; height: 100%; border: 0; background: transparent; }

/* The viewer's bar (#iframe-view .iframe-toolbar): glass, thinner padding, the close button larger. */
.overlay--fill .overlay-bar {
  height: auto; padding: 10px 16px;
  background: color-mix(in srgb, var(--card-bg) 85%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.overlay--fill .overlay-title { display: block; font-size: .85rem; font-weight: 600; }
.overlay--fill .overlay-close {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--card-bg) 85%, transparent);
  transition: border-color .25s cubic-bezier(.16, 1, .3, 1), transform .25s cubic-bezier(.16, 1, .3, 1),
    box-shadow .25s cubic-bezier(.16, 1, .3, 1), background .25s cubic-bezier(.16, 1, .3, 1);
}
.overlay--fill .overlay-close:hover { border-color: var(--text-muted); box-shadow: var(--shadow-md); background: var(--bg-surface); }

/* The way back at the top of the body (.dtl-back): a mono coral line under a heavy rule. */
.overlay-back {
  display: block; box-sizing: border-box; width: 100%;
  border: 0; border-top: var(--shape-frame-heavy) solid var(--shape-rule-colour);
  padding: 14px 0 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--font-mono); font-size: .8rem; line-height: inherit; color: var(--accent);
}
.overlay-back:hover { text-decoration: underline; }

/* The page and its contents rail. */
.overlay-page {
  display: grid; grid-template-columns: minmax(0, 1092px) 250px; gap: 56px;
  justify-content: center; align-items: start;
}
.overlay-main { min-width: 0; }
.overlay-side { position: sticky; top: 0; align-self: start; }
.overlay-side .og-rail { position: static; max-height: calc(100vh - 136px); }

@media (max-width: 1100px) {
  .overlay-page { grid-template-columns: minmax(0, 1fr); }
  .overlay-side { display: none; }
}
@media (max-width: 900px) {
  .overlay-bar { padding: 8px 16px; }
  .overlay-body { padding: 16px 18px 0; }
  .overlay-body--fill { padding: 0; }
  .overlay--fill .overlay-bar { padding: 10px 16px; }
}