/* ===== v11 standalone extras: popovers, dialogs, hidden state ===== */
[hidden] { display: none !important; }
.js-popover {
  background: var(--lp-bg, #fff);
  color: var(--lp-fg, #1a1a1a);
  border: 1px solid var(--lp-line, rgba(0,0,0,.12));
  border-radius: 12px;
  box-shadow: 0 18px 50px -18px rgba(0,0,0,.28);
  padding: 14px;
  max-width: min(92vw, 560px);
  max-height: 70vh;
  overflow: auto;
}
.js-popover .picker-heading { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; opacity: .65; margin-bottom: 10px; display: flex; justify-content: space-between; gap: 16px; }
.js-popover .picker-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.js-popover .design-option, .js-popover .appearance-option {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; padding: 8px; border-radius: 8px;
  font: inherit; font-size: 13px; color: inherit; cursor: pointer; text-align: left;
}
.js-popover .appearance-option { justify-content: space-between; }
.js-popover .design-option:hover, .js-popover .appearance-option:hover { background: rgba(127,127,127,.12); }
.js-popover .design-option[aria-pressed="true"], .js-popover .appearance-option[aria-pressed="true"] { outline: 1px solid currentColor; }
.js-popover .design-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 1; }
.js-popover .design-thumbnail { width: 44px; height: 32px; border-radius: 5px; background: linear-gradient(135deg, #e8e2d6, #cfc7b6); display: grid; place-items: center; font-size: 7px; letter-spacing: .1em; color: #3a352c; flex-shrink: 0; }

.standalone-certificate-viewer { position: fixed; inset: 0; margin: auto; width: min(1000px,94vw); max-height: 92dvh; padding: 28px; border: 1px solid var(--lp-line); border-radius: 8px; background: var(--lp-bg); color: var(--lp-fg); overflow: auto; }
.standalone-certificate-viewer::backdrop { background: color-mix(in srgb,var(--lp-fg) 55%,transparent); }
.standalone-certificate-viewer h2 { font: 600 22px var(--font-display); padding-right: 32px; }
.standalone-certificate-viewer p { color: var(--lp-muted); margin: 10px 0 20px; }
.standalone-certificate-viewer img { width: 100%; max-height: 68dvh; object-fit: contain; }
.viewer-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 1px solid var(--lp-line); border-radius: 50%; background: var(--lp-panel); color: var(--lp-fg); cursor: pointer; font-size: 22px; }

.standalone-blog-reader { position: fixed; inset: 0; margin: auto; width: min(640px, 92vw); max-height: 86dvh; padding: 30px; border: 1px solid var(--lp-line); border-radius: 14px; background: var(--lp-bg); color: var(--lp-fg); overflow: auto; }
.standalone-blog-reader::backdrop { background: color-mix(in srgb, var(--lp-fg) 55%, transparent); }
.standalone-blog-reader .standalone-blog-note { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--lp-accent); margin-bottom: 12px; }
.standalone-blog-reader h2 { font: 500 26px/1.25 var(--font-display); margin-bottom: 12px; }
.standalone-blog-reader .standalone-blog-label { font-size: 12px; color: var(--lp-accent); margin-bottom: 6px; }
.standalone-blog-reader .standalone-blog-desc { font-size: 14px; line-height: 1.8; color: var(--lp-muted); }
.standalone-blog-reader .standalone-blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--lp-line); }
.standalone-blog-reader .standalone-blog-tags span { padding: 5px 12px; border: 1px solid var(--lp-line); border-radius: 999px; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .standalone-certificate-viewer[open], .standalone-blog-reader[open] { animation: none; } }

/* Safety net: if JavaScript is disabled, content must still be visible */
@media (scripting: none) {
  .landing .motion-enter { opacity: 1 !important; translate: none !important; }
}