/* Private, inert website previews used only by Personal OS site cards. */
.personal-site-preview {
  --preview-paper:#f4f7fb;--preview-ink:#19364c;--preview-muted:#566f83;--preview-line:#cad9e5;
  position:relative;min-width:0;background:var(--preview-paper);color:var(--preview-ink);
}
.dark .personal-site-preview,.dark .personal-site-preview-dialog {
  --preview-paper:#101f2d;--preview-ink:#ecf6ff;--preview-muted:#aec4d7;--preview-line:#324a60;
}
.personal-site-preview-cover {
  display:block;width:100%;height:228px;overflow:hidden;position:relative;
  background:#f7fafc;color:var(--preview-ink);isolation:isolate;
}
.personal-site-preview-open {
  display:block;position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  cursor:zoom-in;text-align:left;background:transparent;color:var(--preview-ink);
}
.personal-site-preview-open:disabled{cursor:default}
.personal-site-preview-open:focus-visible {outline:3px solid #0899bd;outline-offset:-3px}
.personal-site-preview-canvas {position:relative;width:100%;min-width:0;overflow:hidden;background:#fff;container-type:inline-size;}
.personal-site-preview-canvas.is-thumbnail{height:100%}
.personal-site-preview-scaled{position:relative;min-width:0}
.personal-site-preview-inert {pointer-events:none;user-select:none;position:relative;overflow:hidden;isolation:isolate;contain:layout style;}
.personal-site-preview-inert .site-body-scroll-region{overflow:visible;max-height:none}
.personal-site-preview-overlay {
  position:absolute;inset:auto 12px 12px auto;display:inline-flex;align-items:center;gap:7px;
  padding:9px 11px;border:1px solid #a1c9d9;border-radius:9px;background:#f8fdff;color:#103b51;
  font-size:12px;font-weight:700;box-shadow:0 3px 12px rgb(5 34 49 / 12%);
  opacity:0;transform:translateY(4px);transition:opacity .16s,transform .16s;
}
.personal-site-preview-overlay svg{height:15px;width:15px}
.personal-site-preview-open:hover .personal-site-preview-overlay,.personal-site-preview-open:focus-visible .personal-site-preview-overlay{opacity:1;transform:none}
.personal-site-preview-empty{display:flex;align-items:center;justify-content:center;gap:9px;height:100%;font-size:13px;background:var(--preview-paper);color:var(--preview-muted)}
.personal-site-preview-empty svg{height:23px;width:23px}
.personal-site-preview-caption{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding-left:16px;border-block:1px solid var(--preview-line);background:var(--preview-paper);color:var(--preview-muted);font-size:11px}
.personal-site-preview-refresh{display:grid;place-items:center;height:44px;width:44px;border:0;border-left:1px solid var(--preview-line);background:transparent;color:var(--preview-ink);cursor:pointer}
.personal-site-preview-refresh svg{width:15px;height:15px}
.personal-site-preview-refresh:disabled{opacity:.45;cursor:default}
.personal-site-preview-refresh:hover:enabled{background:#dff2f8;color:#06445b}
.dark .personal-site-preview-refresh:hover:enabled{background:#193b50;color:#bcf3ff}
.personal-site-preview-refresh:focus-visible{outline:2px solid #0899bd;outline-offset:-3px}
.personal-site-preview-error{margin:0;padding:8px 16px;font-size:11px;line-height:1.5;background:var(--preview-paper);color:var(--preview-muted)}
.personal-site-preview .is-loading{animation:personal-preview-spin 1s linear infinite}
@keyframes personal-preview-spin{to{transform:rotate(360deg)}}
.personal-site-preview-dialog {
  --preview-paper:#f4f7fb;--preview-ink:#19364c;--preview-muted:#566f83;--preview-line:#cad9e5;
  width:calc(100vw - 32px);max-width:1180px!important;max-height:calc(100dvh - 32px);
  display:flex!important;flex-direction:column;gap:14px!important;padding:22px!important;
  background:var(--preview-paper)!important;color:var(--preview-ink);border-color:var(--preview-line)!important;
  overflow:hidden;
}
.personal-site-preview-controls{display:flex;align-items:center;flex-wrap:wrap;gap:9px}
.personal-site-preview-controls [role="group"]{display:flex;gap:3px;border:1px solid var(--preview-line);border-radius:10px;padding:3px;background:var(--preview-paper)}
.personal-site-preview-controls button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;gap:6px;padding:8px 11px;border:0;border-radius:7px;background:transparent;color:var(--preview-ink);font-size:12px;font-weight:600}
.personal-site-preview-controls button svg{height:17px;width:17px}
.personal-site-preview-controls button[aria-pressed="true"]{background:#168cab;color:#fff}
.dark .personal-site-preview-controls button[aria-pressed="true"]{background:#48d5ea;color:#063246}
.personal-site-preview-controls button:hover:not([aria-pressed="true"]){background:#deedf4}
.dark .personal-site-preview-controls button:hover:not([aria-pressed="true"]){background:#203d51}
.personal-site-preview-controls button:focus-visible,.personal-site-preview-page select:focus-visible{outline:2px solid #0899bd;outline-offset:2px}
.personal-site-preview-page{display:flex;align-items:center;gap:8px;margin-right:auto;min-width:0;color:var(--preview-muted);font-size:12px}
.personal-site-preview-page select{min-width:115px;max-width:220px;min-height:50px;padding:8px 28px 8px 10px;border:1px solid var(--preview-line);border-radius:10px;background:var(--preview-paper);color:var(--preview-ink)}
.personal-site-preview-expanded{min-height:100px;overflow:auto;overscroll-behavior:contain;border:1px solid var(--preview-line);border-radius:12px;background:#dbe4eb;padding:12px}
.personal-site-preview-expanded[data-preview-color-mode="dark"]{background:#08121f}
.personal-site-preview-expanded .personal-site-preview-canvas[data-site-preview-mode="mobile"]{width:min(390px,100%);margin-inline:auto}
.personal-site-preview-note{margin:0;color:var(--preview-muted);font-size:11px;line-height:1.6}
@media(hover:none){.personal-site-preview-overlay{opacity:1;transform:none}}
@media(max-width:639px){
  .personal-site-preview-cover{height:196px}
  .personal-site-preview-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:16px!important;gap:10px!important}
  .personal-site-preview-controls{gap:6px}
  .personal-site-preview-page{flex:1 1 100%;order:-1}
  .personal-site-preview-page select{flex:1;max-width:none;min-height:44px}
  .personal-site-preview-controls button{padding-inline:8px}
  .personal-site-preview-expanded{padding:6px}
}
@media(prefers-reduced-motion:reduce){
  .personal-site-preview-overlay{transition:none;transform:none}
  .personal-site-preview .is-loading{animation:none}
}

.personal-site-preview-dialog > button:last-child{width:44px;height:44px;min-width:44px;min-height:44px;top:8px;right:8px;color:var(--preview-ink);}

/* Desktop snapshots retain desktop breakpoint values even on a phone. */
.personal-site-preview-inert[data-site-preview-mode="desktop"] .site-responsive-element {
  display:var(--site-base-display,block);
  margin:var(--site-base-margin-top,0) var(--site-base-margin-right,0) var(--site-base-margin-bottom,0) var(--site-base-margin-left,0)!important;
}
.personal-site-preview-inert[data-site-preview-mode="desktop"] .site-responsive-content {
  --site-active-explicit-font-size:var(--site-base-explicit-font-size);
  --site-content-justify:var(--site-base-content-justify);--site-content-left:var(--site-base-content-left);--site-content-right:var(--site-base-content-right);
  font-size:var(--site-base-font-size,inherit)!important;text-align:var(--site-base-text-align,inherit)!important;
}
.personal-site-preview-inert[data-site-preview-mode="desktop"] .site-section-columns{grid-template-columns:var(--site-section-template);}
.personal-site-preview-inert[data-site-preview-mode="desktop"] .site-inline-group{justify-content:var(--site-inline-base-justify);}
.personal-site-preview-inert[data-site-preview-mode="desktop"] .site-inline-item{margin-left:var(--site-inline-base-left);margin-right:var(--site-inline-base-right);}
.personal-site-preview-inert[data-site-preview-mode="desktop"] .site-global-nav-desktop{display:flex;}
.personal-site-preview-inert[data-site-preview-mode="desktop"] .site-global-header-desktop-only{display:block;}
.personal-site-preview-inert[data-site-preview-mode="desktop"] .site-global-nav-mobile{display:none;}
.personal-site-preview-inert[data-site-preview-mode="desktop"] .site-global-header-inner{flex-wrap:nowrap;}
.personal-site-preview-inert[data-site-preview-mode="desktop"] .site-global-header-brand-slot{flex:initial;}
.personal-site-preview-inert[data-site-preview-mode="desktop"][data-site-shell-layout="sidebar-left"],
.personal-site-preview-inert[data-site-preview-mode="desktop"][data-site-shell-layout="sidebar-right"]{display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:stretch;}
.personal-site-preview-inert[data-site-preview-mode="desktop"][data-site-shell-layout="sidebar-left"]{grid-template-columns:minmax(0,var(--site-header-sidebar-width,272px)) minmax(0,1fr);}
.personal-site-preview-inert[data-site-preview-mode="desktop"][data-site-shell-layout="sidebar-right"]{grid-template-columns:minmax(0,1fr) minmax(0,var(--site-header-sidebar-width,272px));}
.personal-site-preview-inert[data-site-preview-mode="desktop"][data-site-shell-layout^="sidebar-"] > [data-site-global-header]{position:relative;height:var(--site-viewport-height,760px);grid-row:1/span 2;min-height:0;border-bottom-width:0;}
.personal-site-preview-inert[data-site-preview-mode="desktop"][data-site-shell-layout="sidebar-left"] > [data-site-global-header]{grid-column:1;border-right-width:1px;border-left-width:0;}
.personal-site-preview-inert[data-site-preview-mode="desktop"][data-site-shell-layout="sidebar-right"] > [data-site-global-header]{grid-column:2;border-left-width:1px;border-right-width:0;}
.personal-site-preview-inert[data-site-preview-mode="desktop"][data-site-shell-layout="sidebar-left"] > .site-body-scroll-region{grid-column:2;grid-row:1;}
.personal-site-preview-inert[data-site-preview-mode="desktop"][data-site-shell-layout="sidebar-right"] > .site-body-scroll-region{grid-column:1;grid-row:1;}
.personal-site-preview-inert[data-site-preview-mode="desktop"] [data-site-header-layout^="sidebar-"] .site-global-header-inner{flex-direction:column;align-items:stretch;justify-content:flex-start;}
.personal-site-preview-inert[data-site-preview-mode="desktop"] [data-site-header-layout^="sidebar-"] .site-global-nav-link{width:100%;}

/* Scaled thumbnails crop inside the cover without reserving the unscaled canvas height. */
.personal-site-preview-cover > .personal-site-preview-canvas.is-thumbnail {
  position: absolute; inset: 0; width: 100%; height: 100%;
}