/*
 * Web view pane (AUDYT.md B3) — Explorer's folder template (webvw.htt), measured on My Computer, Control Panel, the
 * Recycle Bin and Search Results: the banner, the folder's title and a rule over its text, an info box, "See also"
 * links. The application places the paragraphs (style top: each template measured).
 *
 *   <div class="w2k-webview" [data-layout="top"]>
 *     <img class="w2k-webview__banner" src="…"><h1 class="w2k-webview__title">…</h1><div class="w2k-webview__rule"></div>
 *     <p class="w2k-webview__text" style="top:…">…</p> <p class="w2k-webview__info" style="top:…">…</p>
 *     <p class="w2k-webview__see-also" style="top:…">See also:</p>
 *     <div class="w2k-webview__links" style="top:…"><a class="w2k-link">…</a>…</div></div>
 *
 * data-layout="top": across the top of the view (Search Results), 128px high. A theme's tokens: --webview-width (win2k:
 * 200px, narrowed with the window — 191 in My Computer, fitted), --webview-title-font, --webview-rule-display; an
 * illustration in place of the banner (a theme's icon, data-icon-theme) at --webview-art-left / -top, the text moved
 * down by --webview-art-shift (exposed to the view as --webview-shift).
 */
.w2k-webview {
  position: relative;
  flex: none;
  width: var(--webview-width, min(200px, calc(100% - 349px)));
  overflow: hidden;
  color: var(--sys-window-text);
}
.w2k-webview > * { position: absolute; margin: 0; }
.w2k-webview__banner { left: 0; top: 0; }
.w2k-webview__title { left: 12px; top: calc(48px + var(--webview-shift, 0px)); font: var(--webview-title-font, 700 17px / 21px "W2K Tahoma Bold 17"); white-space: pre; }
.w2k-webview__rule { display: var(--webview-rule-display, block); left: 0; top: calc(72px + var(--webview-shift, 0px)); width: 184px; height: 2px; background: var(--color-webview-rule); }
.w2k-webview__text, .w2k-webview__info, .w2k-webview__links { width: 172px; }
.w2k-webview > :is(.w2k-webview__text, .w2k-webview__info, .w2k-webview__see-also, .w2k-webview__links) { left: 12px; margin-top: var(--webview-shift, 0px); }
.w2k-webview__info { box-sizing: border-box; border: 1px solid var(--color-webview-info-border); background: var(--sys-info-window); padding: 0; }
.w2k-webview__links { height: 60px; }
.w2k-webview__links > * { position: absolute; left: 0; top: 0; white-space: pre; }
.w2k-webview__links > :nth-child(2) { top: 17px; }
.w2k-webview__links > :nth-child(3) { top: 34px; }   /* 17px apart (measured) */
.w2k-webview:where([data-layout="top"]) { width: auto; height: calc(128px + var(--webview-shift, 0px)); }
.w2k-webview:where([data-layout="top"]) > .w2k-webview__title { left: 14px; top: calc(50px + var(--webview-shift, 0px)); }
.w2k-webview:where([data-layout="top"]) > .w2k-webview__rule { left: 2px; top: calc(74px + var(--webview-shift, 0px)); width: 160px; }
/* A theme's illustration in place of the banner bitmap. */
.w2k-webview:has(> .w2k-webview__banner[data-icon-theme]) { --webview-shift: var(--webview-art-shift, 0px); }
.w2k-webview > .w2k-webview__banner[data-icon-theme] { left: var(--webview-art-left, 0px); top: var(--webview-art-top, 0px); }