/* © 2026 MEK.txt. All rights reserved. Part of the MEK design system; not licensed for reuse. */
/* MEK design system · part: loupe
   A dialog for one thing up close: the thing on the left, its name with its actions, a Mono line of facts, what's
   said about it, and a foot. First made for one character of a pixel font (the glyph on a grid, its styles to switch
   between), and as much for any item: a card, a picture, an icon, a saint (Anchorites' Enclose). Needs the core
   dialog (dialog.css) and px-box.css.
   Any item: the thing in .loupe-subject (it keeps its own size, at the top), the name and .loupe-actions (icon
   buttons, a .cluster that never wraps or squeezes) in .loupe-title, .loupe-meta, then the page's own words, and
   .loupe-foot (facts that aren't a choice: a kv list, a note) at the bottom, level with the subject's foot.
   A glyph: the page draws the grid: an <i> a cell, <i class="ink"> a lit one, a last <b> the baseline; --cols (cells
   across) and --base (rows above the baseline) on .loupe-grid; and .loupe-styles at the bottom, a tile a style.
   Never crowded: the panel is 640px (16px inside the window each side), not the dialog's 420. The details keep at least
   --loupe-info-min (288px); with less room the subject goes on top of them, centred. The styles are equal square tiles
   over their names, --loupe-styles to a row (4); where a row of them can't fit their names (under 402px of details)
   they go two to a row, half as tall as wide. No tile overlaps another or spills out of the panel.
   In the mek.parts layer, so a project's CSS wins. */

@layer mek.parts {

.loupe { --loupe-cell: 12px; --loupe-info-min: 288px; --loupe-styles: 4;
  max-width: none; width: min(640px, calc(100% - 32px)); padding: var(--space-6); overflow: visible; }
.loupe[open] { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); }
.loupe:focus { outline: none; }

/* Any item: the thing at its own size, at the top (never stretched to the details' height). */
.loupe-subject { flex: none; align-self: flex-start; max-width: 100%; }

/* The glyph: whole cells with a 1px line in the surface colour, ink in --text, the baseline 2px of 500-accent. */
.loupe-grid { flex: none; align-self: flex-start; position: relative; display: grid;
  grid-template-columns: repeat(var(--cols, 13), var(--loupe-cell)); grid-auto-rows: var(--loupe-cell); }
.loupe-grid i { border: var(--stroke) solid var(--surface); background: var(--bg); }
.loupe-grid i.ink { background: var(--text); }
.loupe-grid b { position: absolute; left: 0; right: 0; top: calc(var(--base, 0) * var(--loupe-cell) - 1px); height: 2px; background: var(--500-accent); }

/* The details: name and Copy at the top, the meta under them, the styles at the bottom, level with the grid's foot. */
.loupe-info { flex: 1 1 var(--loupe-info-min); min-width: 0; display: flex; flex-direction: column; gap: var(--space-4);
  container-type: inline-size; }
.loupe-title { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.loupe-title > .btn { flex: none; }
.loupe-title > .loupe-actions { flex: none; flex-wrap: nowrap; }   /* the icon buttons together at the title's end, never squeezed or wrapped */
.loupe-name { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: var(--text-lg); color: var(--text); -webkit-font-smoothing: none; }
.loupe-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-6); font: var(--text-sm)/normal var(--font-mono); color: var(--text-muted); }

/* The foot: facts that aren't a choice (a kv list, a note), at the bottom, level with the subject's foot. */
.loupe-foot { margin-top: auto; }
.loupe-foot + .loupe-styles, .loupe-styles + .loupe-foot { margin-top: 0; }   /* both: the first takes the room */

/* The styles: a tile each, the glyph in a square over its name. Pressed: the line 700, the name 1000. */
.loupe-styles { margin-top: auto; display: grid; grid-template-columns: repeat(var(--loupe-styles), minmax(0, 1fr)); gap: 6px; }
@container (max-width: 401px) { .loupe-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .loupe-styles .loupe-type .sq { aspect-ratio: 2 / 1; } }
.loupe-type { min-width: 0; display: grid; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.loupe-type .sq { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; font-size: 36px; color: var(--text); -webkit-font-smoothing: none; }
.loupe-type .lbl { padding: 8px var(--space-1) 9px; font-size: var(--text-sm); color: var(--text); text-align: center; white-space: nowrap; overflow: hidden; }
.loupe-type .px-box { --edge-to: var(--line-hover); }
.loupe-type:hover .px-box { --dz: 1; }
.loupe-type[aria-pressed="true"] .px-box, .loupe-type.on .px-box { --edge: var(--text-muted); --edge-to: var(--text-muted); }
.loupe-type[aria-pressed="true"] .lbl, .loupe-type.on .lbl { color: var(--text-strong); }

/* Phones: a little less padding. */
@media (max-width: 640px) {   /* --bp-phone */
  .loupe { padding: var(--space-4); }
}

} /* @layer mek.parts */