/* Shared annotation presentation system — v0.7 */
.cd-annotation-shell{position:relative;width:100%;min-width:0}
.cd-annotation-panel{
 background:var(--cd-annotation-bg);
 color:var(--cd-annotation-text);
 border:1px solid var(--cd-annotation-border);
 border-radius:var(--cd-annotation-radius);
}
.cd-annotation-panel h3{color:var(--cd-silver-light)}
.cd-annotation-panel .cd3d-reader-body{color:var(--cd-annotation-muted)}

/* Overlay: card floats over the visual stage. */
.cd-annotation-shell[data-annotation-presentation="overlay"] .cd-annotation-panel{
 position:absolute;right:12px;bottom:12px;
 width:min(360px,calc(100% - 24px));max-height:calc(100% - 70px);
 z-index:20;
}

/* Bottom: media remains unobstructed; annotation grows the component downward. */
.cd-annotation-shell[data-annotation-presentation="bottom"] .cd-annotation-panel{
 position:relative;right:auto;bottom:auto;width:100%;max-height:none;
 margin-top:8px;border-radius:var(--cd-annotation-radius);
}

/* Side: technical/reference layout. */
.cd-annotation-shell[data-annotation-presentation="side"]{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,34%);gap:8px;align-items:stretch;
}
.cd-annotation-shell[data-annotation-presentation="side"] .cd3d-stage{grid-column:1}
.cd-annotation-shell[data-annotation-presentation="side"] .cd-annotation-panel{
 grid-column:2;position:relative;right:auto;bottom:auto;width:100%;max-height:none;
 align-self:stretch;
}
.cd-annotation-shell[data-annotation-presentation="side"] .cd-annotation-panel:not(.is-open){
 display:block;visibility:hidden;opacity:0;
}

/* Minimal: compact unobtrusive card. */
.cd-annotation-shell[data-annotation-presentation="minimal"] .cd-annotation-panel{
 position:absolute;right:12px;bottom:12px;z-index:20;
 width:min(280px,calc(100% - 24px));max-height:45%;
 padding:12px 14px;
}
.cd-annotation-shell[data-annotation-presentation="minimal"] .cd-annotation-panel h3{
 margin-bottom:4px;font-size:15px;
}
.cd-annotation-shell[data-annotation-presentation="minimal"] .cd3d-reader-body{
 font-size:12px;line-height:1.35;
}

@media(max-width:760px){
 .cd-annotation-shell[data-annotation-presentation="side"]{display:block}
 .cd-annotation-shell[data-annotation-presentation="side"] .cd-annotation-panel{
   margin-top:8px;min-height:0;
 }
}

/* v0.7.1 — universal annotation navigation */
.cd-annotation-navigation{
 display:flex;justify-content:flex-end;gap:6px;margin-top:14px;
}
.cd-annotation-navigation button,
.cdin-public-nav{
 width:34px;height:30px;padding:0;
 border:1px solid var(--cd-control-border);
 border-radius:var(--cd-control-radius);
 background:var(--cd-control-bg);color:var(--cd-control-text);
 font:700 20px/1 sans-serif;cursor:pointer;
}
.cd-annotation-navigation button:hover,
.cdin-public-nav:hover{border-color:var(--cd-accent);color:var(--cd-white)}
.cd3d-reader-counter{
 margin:0 34px 8px 0;color:var(--cd-silver);
 font:700 9px/1 sans-serif;letter-spacing:.12em;text-transform:uppercase;
}

/* Image Navigator uses the same four presentation modes. */
.cdin-public-stage.cd-annotation-shell[data-annotation-presentation="overlay"],
.cdin-public-stage.cd-annotation-shell[data-annotation-presentation="minimal"]{display:block}
.cdin-public-stage.cd-annotation-shell[data-annotation-presentation="overlay"] .cdin-public-image-area,
.cdin-public-stage.cd-annotation-shell[data-annotation-presentation="minimal"] .cdin-public-image-area{width:100%}
.cdin-public-stage.cd-annotation-shell[data-annotation-presentation="overlay"] .cdin-public-reader,
.cdin-public-stage.cd-annotation-shell[data-annotation-presentation="minimal"] .cdin-public-reader{
 position:absolute;z-index:20;
}
.cdin-public-stage.cd-annotation-shell[data-annotation-presentation="bottom"] .cdin-public-reader{
 position:relative;width:100%;margin-top:8px;
}
.cdin-public-stage.cd-annotation-shell[data-annotation-presentation="side"]{
 display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,34%);gap:8px;align-items:stretch;
}
.cdin-public-stage.cd-annotation-shell[data-annotation-presentation="side"] .cdin-public-image-area{grid-column:1}
.cdin-public-stage.cd-annotation-shell[data-annotation-presentation="side"] .cdin-public-reader{
 grid-column:2;position:relative;width:100%;margin:0;align-self:stretch;
}
@media(max-width:760px){
 .cdin-public-stage.cd-annotation-shell[data-annotation-presentation="side"]{display:block}
 .cdin-public-stage.cd-annotation-shell[data-annotation-presentation="side"] .cdin-public-reader{margin-top:8px}
}

/* v0.7.2 — presentation policy + embodied content */
.cd-annotation-shell[data-annotation-presentation="overlay"] .cd-annotation-panel{
 width:min(480px,calc(100% - 24px));padding:20px;
}
.cd-annotation-shell[data-annotation-presentation="bottom"] .cd-annotation-panel{
 padding:18px 20px;
}
.cd-annotation-shell[data-annotation-presentation="side"] .cd-annotation-panel{
 padding:20px;overflow:auto;
}
.cd-annotation-shell[data-annotation-presentation="minimal"] .cd-annotation-panel{
 width:min(320px,calc(100% - 24px));
}
.cd-annotation-content-toggle,
.cdin-public-media-toggle{
 display:none;align-items:center;justify-content:center;min-height:36px;
 margin:14px 0 0;padding:0 14px;
 border:1px solid var(--cd-control-border);border-radius:var(--cd-control-radius);
 background:transparent;color:var(--cd-control-text);
 font:700 12px/1 sans-serif;cursor:pointer;
}
.cd-annotation-content-toggle:not([hidden]),
.cdin-public-media-toggle.is-available{display:inline-flex}
.cd-annotation-navigation,
.cdin-public-navigation{
 border-top:1px solid var(--cd-annotation-border);
 padding-top:12px;margin-top:16px;
}
.cd-annotation-embodied{margin-top:18px}
.cd-annotation-embodied img{display:block;width:100%;height:auto;max-height:55vh;object-fit:contain}
.cd-annotation-modal{
 width:min(1100px,calc(100vw - 40px));height:min(86vh,900px);
 max-width:none;max-height:none;margin:auto;padding:0;
 border:1px solid var(--cd-annotation-border);border-radius:var(--cd-component-radius);
 background:#000;color:#fff;
}
.cd-annotation-modal::backdrop{background:rgba(0,0,0,.86);backdrop-filter:blur(8px)}
.cd-annotation-modal-body{
 width:100%;height:100%;overflow:auto;padding:54px 24px 24px;
 display:flex;align-items:center;justify-content:center;
}
.cd-annotation-modal-body>img{
 display:block;max-width:100%;max-height:calc(86vh - 78px);width:auto;height:auto;object-fit:contain;
}
.cd-annotation-modal-close{
 position:absolute;z-index:10;top:12px;right:12px;width:36px;height:36px;padding:0;
 border:1px solid var(--cd-control-border);border-radius:50%;
 background:#000;color:#fff;font-size:22px;cursor:pointer;
}
@media(max-width:700px){
 .cd-annotation-shell[data-annotation-presentation="overlay"] .cd-annotation-panel{padding:16px}
 .cd-annotation-modal{width:calc(100vw - 16px);height:calc(100vh - 16px)}
}

/* v0.7.3 — content-sized annotation modal.
   Auto is the default: dialog hugs the rendered content instead of creating
   a viewport-sized black box around it. */
.cd-annotation-modal{
 width:fit-content;height:fit-content;
 max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);
 overflow:visible;
}
.cd-annotation-modal-body{
 width:auto;height:auto;max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);
 overflow:auto;padding:0;display:block;
}
.cd-annotation-modal-body>img{
 display:block;width:auto;height:auto;
 max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);
 object-fit:contain;
}
.cd-annotation-modal-close{
 top:8px;right:8px;background:rgba(0,0,0,.78);
}
.cd-annotation-modal[data-display-size="small"]{width:min(480px,calc(100vw - 40px));height:auto}
.cd-annotation-modal[data-display-size="medium"]{width:min(760px,calc(100vw - 40px));height:auto}
.cd-annotation-modal[data-display-size="large"]{width:min(1100px,calc(100vw - 40px));height:auto}
.cd-annotation-modal[data-display-size="full"]{
 width:calc(100vw - 40px);height:calc(100vh - 40px);
}
.cd-annotation-modal[data-display-size="small"] .cd-annotation-modal-body,
.cd-annotation-modal[data-display-size="medium"] .cd-annotation-modal-body,
.cd-annotation-modal[data-display-size="large"] .cd-annotation-modal-body{width:100%}
.cd-annotation-modal[data-display-size="small"] .cd-annotation-modal-body>img,
.cd-annotation-modal[data-display-size="medium"] .cd-annotation-modal-body>img,
.cd-annotation-modal[data-display-size="large"] .cd-annotation-modal-body>img{width:100%;height:auto}
.cd-annotation-modal[data-display-size="full"] .cd-annotation-modal-body{
 width:100%;height:100%;display:flex;align-items:center;justify-content:center;
}
@media(max-width:700px){
 .cd-annotation-modal,
 .cd-annotation-modal[data-display-size]{max-width:calc(100vw - 16px);max-height:calc(100vh - 16px)}
 .cd-annotation-modal[data-display-size="full"]{width:calc(100vw - 16px);height:calc(100vh - 16px)}
}

/* v0.7.4 — Auto modal must hug content at every breakpoint.
   Override the older mobile dialog height rule that created empty black space. */
.cd-annotation-modal:not([data-display-size]),
.cd-annotation-modal[data-display-size="auto"]{
 width:fit-content!important;
 height:fit-content!important;
 max-width:calc(100vw - 40px);
 max-height:calc(100vh - 40px);
}
@media(max-width:700px){
 .cd-annotation-modal:not([data-display-size]),
 .cd-annotation-modal[data-display-size="auto"]{
   width:fit-content!important;
   height:fit-content!important;
   max-width:calc(100vw - 16px);
   max-height:calc(100vh - 16px);
 }
}

/* v0.7.6 — embodied Gutenberg content */
.cd-annotation-embodied .wp-block-image,
.cd-annotation-modal-body .wp-block-image{margin:0}
.cd-annotation-embodied > :first-child,
.cd-annotation-modal-body > :first-child{margin-top:0}
.cd-annotation-embodied > :last-child,
.cd-annotation-modal-body > :last-child{margin-bottom:0}
.cd-annotation-embodied .cd-site-component,
.cd-annotation-modal-body .cd-site-component{max-width:100%}

/* v0.8.2 — bounded annotation content.
   Embodied content may use the available annotation area, but it must never
   increase the component's outer height and push following page content down. */
.cd-annotation-shell[data-annotation-presentation="side"]{
 min-height:0;
}
.cd-annotation-shell[data-annotation-presentation="side"] .cd-annotation-panel,
.cd-annotation-shell[data-annotation-presentation="side"] .cdin-public-reader{
 min-height:0!important;
 max-height:100%!important;
 overflow:hidden!important;
}
.cd-annotation-shell[data-annotation-presentation="side"] .cd-annotation-embodied{
 min-height:0;
 max-height:100%;
 overflow:auto;
 overscroll-behavior:contain;
 -webkit-overflow-scrolling:touch;
 scrollbar-gutter:stable;
}
.cd-annotation-shell[data-annotation-presentation="side"] .cd-library-item{
 min-height:0;
 max-height:100%;
}

/* Overlay/bottom annotation cards remain bounded even with long descriptions. */
.cd-annotation-shell[data-annotation-presentation="overlay"] .cd-annotation-panel,
.cd-annotation-shell[data-annotation-presentation="bottom"] .cd-annotation-panel{
 max-height:min(70%,560px);
 overflow:auto;
 overscroll-behavior:contain;
 scrollbar-gutter:stable;
}

/* Content modal can expand until it reaches the viewport boundary; after that,
   scrolling happens inside the modal instead of extending the document. */
.cd-annotation-modal{
 max-width:calc(100vw - 40px)!important;
 max-height:calc(100dvh - 40px)!important;
 overflow:hidden!important;
}
.cd-annotation-modal-body{
 min-width:0;
 min-height:0;
 max-width:calc(100vw - 40px)!important;
 max-height:calc(100dvh - 40px)!important;
 overflow:auto!important;
 overscroll-behavior:contain;
 -webkit-overflow-scrolling:touch;
 scrollbar-gutter:stable;
}
.cd-annotation-modal-body .cd-library-item,
.cd-annotation-modal-body .cd-site-component{
 max-width:100%;
 min-width:0;
}
@media(max-width:700px){
 .cd-annotation-modal,
 .cd-annotation-modal-body{
   max-width:calc(100vw - 16px)!important;
   max-height:calc(100dvh - 16px)!important;
 }
}

/* v0.8.3 — dynamic embedded components cannot resize the side panel.
   The panel is pinned in JS to the visual frame's measured height. */
.cd-annotation-shell[data-annotation-presentation="side"] .cd-annotation-panel{
 display:flex!important;
 flex-direction:column;
 min-height:0!important;
 overflow:hidden!important;
}
.cd-annotation-shell[data-annotation-presentation="side"] .cd-annotation-embodied{
 flex:1 1 auto;
 min-height:0!important;
 max-height:none!important;
 overflow:auto!important;
 overscroll-behavior:contain;
 scrollbar-gutter:stable;
}