/* AVIS Press "block" popup - shared styles for the floating-popup reader (see
   src/press-widget.mjs). Deliberately a plain, solid, semi-opaque backdrop - no
   backdrop-filter/blur - per the site owner's explicit instruction that this particular popup be
   legible, not blurred, even though other pages in this codebase (src/marketplace.mjs) do use
   blur for their own overlays. Self-contained: fixed colours, not each host page's own CSS custom
   properties, so this one component reads the same everywhere it is dropped in. */
.pw-overlay{position:fixed;inset:0;z-index:400;background:rgba(12,10,8,.78);display:flex;justify-content:center;overflow-y:auto;padding:40px 16px}
.pw-overlay[hidden]{display:none}
.pw-shell{background:#FFFFFF;color:#181512;border-radius:10px;max-width:860px;width:100%;padding:34px 40px 44px;position:relative;box-shadow:0 30px 70px -30px rgba(0,0,0,.6);height:max-content;transition:max-width .18s ease,width .18s ease}
/* Reported directly: "by click popup free loading expandable window" - the reader starts at a
   comfortable single-column reading width (max-width above) and the expand toggle below opens it
   right up to near-fullscreen, for a bigger embedded PDF/video or just more room. The overlay
   itself still owns scrolling (overflow-y:auto, above) either way, so expanding never needs its
   own separate scroll container. */
.pw-shell.pw-expanded{max-width:none;width:min(96vw,1400px)}
.pw-close,.pw-expand{position:absolute;top:14px;width:34px;height:34px;border:1px solid #ddd6cb;border-radius:50%;background:#fff;color:#181512;display:grid;place-items:center;font-size:18px;line-height:1;cursor:pointer;padding:0}
.pw-close{right:14px}
.pw-expand{right:58px;font-size:15px}
.pw-close:hover,.pw-close:focus-visible,.pw-expand:hover,.pw-expand:focus-visible{border-color:#96690C;color:#96690C}
.pw-badge{display:inline-block;background:#7A1F2A;color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;border-radius:3px;padding:4px 8px;margin-bottom:10px}
.pw-reader h1{font-size:clamp(22px,3.6vw,32px);line-height:1.12;margin:0 0 10px;font-family:Georgia,"Times New Roman",serif;font-weight:800}
.pw-dek{font-size:15px;color:#544c40;margin:0 0 8px}
.pw-time{display:block;margin-bottom:14px;font-size:11px;color:#8b8175}
.pw-media{margin:0 0 16px;border-radius:8px;overflow:hidden}
.pw-media img{width:100%;display:block}
.pw-media figcaption{padding:8px 0 0;font-size:11.5px;color:#8b8175}
.pw-body{font-size:15.5px;line-height:1.7;color:#181512}
.pw-body:after{content:"";display:block;clear:both}
.pw-body p{margin:0 0 12px}
.pw-body ul,.pw-body ol{padding-left:26px;margin:0 0 12px}
.pw-body a{color:#96690C}
.pw-body img{max-width:100%;border-radius:6px;display:block;margin:10px 0}
.pw-body video{max-width:100%;border-radius:6px;display:block;margin:10px 0;background:#000}
/* Codex review finding (P2, round 70, on rich-text.mjs's preserveOversizedWidth): img/video already
   pair their base width:100% with max-width:100%, so an oversized inline width from an import still
   shrinks to fit; audio never got the same pairing, so an imported <audio style="width:9999px">
   overflowed the reader by thousands of pixels once the sanitizer started preserving that width. */
.pw-body audio{display:block;width:100%;max-width:100%;margin:10px 0}
.pw-body .pw-yt-embed{position:relative;padding-top:56.25%;margin:10px 0;border-radius:6px;overflow:hidden;background:#000}
.pw-body .pw-yt-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pw-body .pw-pdf-embed{margin:10px 0}
.pw-body .pw-pdf-embed iframe{width:100%;height:70vh;border:1px solid #ddd6cb;border-radius:6px;display:block}
.pw-body .pw-pdf-fallback{font-size:12px;color:#8b8175;margin:6px 0 0}
/* Reported directly: "All images and Videos embedded into text and audio messages must be
   editable in size and location, movable, and text floating must be working" - these float/size
   classes were image-only; a video or audio message now takes the exact same ones (see
   PRESS_IMAGE_ALIGN_CLASSES in press-schema.mjs and the class-swap UI in src/admin.mjs's press
   panel), so text genuinely reflows around a floated video/audio the same way it already does
   around a floated image. */
.pw-body img.pw-img-left,.pw-body video.pw-img-left,.pw-body audio.pw-img-left{float:left;max-width:45%;margin:4px 16px 10px 0}
.pw-body img.pw-img-right,.pw-body video.pw-img-right,.pw-body audio.pw-img-right{float:right;max-width:45%;margin:4px 0 10px 16px}
.pw-body img.pw-img-full,.pw-body video.pw-img-full,.pw-body audio.pw-img-full{max-width:100%;float:none}
.pw-body img.pw-img-inline,.pw-body video.pw-img-inline,.pw-body audio.pw-img-inline{max-width:220px;float:none;display:inline-block;vertical-align:middle;margin:4px 8px}
.pw-body img.pw-img-center,.pw-body video.pw-img-center,.pw-body audio.pw-img-center{float:none;display:block;max-width:100%;margin:8px auto}
.pw-goto{margin-top:18px}
.pw-goto a{color:#96690C;font-weight:700;text-decoration:none}
.pw-goto a:hover{text-decoration:underline}

/* Small clickable icon/thumbnail entries - the /press masthead's "3 last blogs" icons and every
   shop page's "Latest from AVIS Press" widget. Neutral, mid-tone chrome so it reads on either a
   light or a dark host header without borrowing that page's own theme variables. */
.pw-mini{display:flex;flex-direction:column;gap:4px;border:0;border-radius:0;padding:0;background:none;color:inherit;cursor:pointer;text-align:left;width:102px;font:inherit}
.pw-mini:hover .pw-mini-headline,.pw-mini:focus-visible .pw-mini-headline{color:#96690C}
.pw-mini-media{width:102px;height:102px;border-radius:6px;overflow:hidden;flex:0 0 auto;background:rgba(128,128,128,.25)}
.pw-mini-media img{width:100%;height:100%;object-fit:cover;display:block}
.pw-mini-noimg{display:grid;place-items:center;width:100%;height:100%;font-size:14px;font-family:Georgia,serif}
.pw-mini-text{min-width:0;width:100%}
.pw-mini-headline{display:block;font-size:5.75px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pw-mini-time{display:block;font-size:4.75px;opacity:.75;margin-top:2px}

@media (max-width:600px){
  .pw-shell{padding:26px 18px 32px}
  .pw-body img.pw-img-left,.pw-body img.pw-img-right,.pw-body video.pw-img-left,.pw-body video.pw-img-right,.pw-body audio.pw-img-left,.pw-body audio.pw-img-right{float:none;max-width:100%;margin:8px 0}
}