/* VOLIQA V402 — popup placement and appearance standard.
   Public header/footer geometry and the live-candidate table are intentionally
   outside this stylesheet's scope. New popup colours are added by assigning
   --v-popup-accent on the modal wrapper. */
:root{
  --v-popup-color-cyan:#78c8bb;
  --v-popup-color-orange:#d5a06c;
  --v-popup-color-pink:#c990b5;
  --v-popup-color-red:#cf8f9d;
  --v-popup-color-violet:#b6a0dc;
  --v-popup-dialog-surface:#111016;
  --v-popup-surface:#17131d;
  --v402-popup-copy:#ded7e2;
  --v402-popup-muted:#b9b1c0;
}

/* Muted semantic accents: the frame and its actions always use one token. */
.v400-how-modal,.v40-faq-modal{--v-popup-accent:var(--v-popup-color-cyan)}
.v400-how-modal{--v400-popup-accent:var(--v-popup-accent)}
.v40-faq-modal{--v40-cyan:var(--v-popup-accent);--v40-line:color-mix(in srgb,var(--v-popup-accent) 36%,transparent);--v40-panel:var(--v-popup-surface)}
.v48-sitemap-modal,#modal-sitemap{--v-popup-accent:var(--v-popup-color-violet)}
#v347-cookie-modal{--v-popup-accent:var(--v-popup-color-violet)}
.v364-about-modal{--v-popup-accent:var(--v-popup-color-pink)}
.v371-build-modal.v13-modal{--v-popup-accent:var(--v-popup-color-orange)}
.v48-case-modal,.v339-analysis-modal{--v-popup-accent:var(--v-popup-color-red)}
.v81-ai-modal{--v-popup-accent:var(--v-popup-color-violet)}

/* All known public overlays start from the viewport top, never vertically
   centred behind the fixed menu. They retain safe-area room on mobile. */
:is(
  .v364-about-modal:not([hidden]),
  .v400-how-modal:not([hidden]),
  .v40-faq-modal:not([hidden]),
  .v24-help-modal:not([hidden]),
  .v48-sitemap-modal:not([hidden]),
  .v48-case-modal:not([hidden]),
  .v81-ai-modal:not([hidden]),
  .v339-analysis-modal:not([hidden]),
  #v347-cookie-modal:not([hidden]),
  .v113-legal-modal.is-open,
  .v13-modal.open,
  .v13-modal.is-open,
  .v13-modal[aria-hidden="false"]
){
  position:fixed!important;
  inset:0!important;
  z-index:40000!important;
  align-items:flex-start!important;
  align-content:start!important;
  justify-content:center!important;
  padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
}
.v13-modal.open,.v13-modal.is-open,.v13-modal[aria-hidden="false"]{
  display:grid!important;
  justify-items:center!important;
}
.v113-legal-modal.is-open{display:flex!important}

/* Each dialog owns its scroll area. Its height leaves room for the pinned
   closing control and never forces a user to scroll the page to exit. */
:is(
  .v13-modalbox,
  .v364-about-dialog,
  .v400-how-dialog,
  .v40-faq-dialog,
  .v48-sitemap-dialog,
  .v48-case-dialog,
  .v81-ai-dialog,
  .v339-analysis-dialog,
  .v347-cookie-dialog,
  .v113-legal-dialog,
  .v24-help-dialog
){
  position:relative!important;
  max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
  margin:0 auto!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  border-color:var(--v-popup-accent)!important;
  background:linear-gradient(145deg,#17131b 0%,#100f14 100%)!important;
  box-shadow:0 20px 72px rgba(0,0,0,.62),0 0 24px color-mix(in srgb,var(--v-popup-accent) 10%,transparent)!important;
  color:var(--v402-popup-copy)!important;
}

/* The close square stays in view while the dialog's content scrolls. */
.v13-modalhead,.v48-sitemap-head{
  position:sticky!important;
  top:0!important;
  z-index:41!important;
  margin:0!important;
  padding:0 0 12px!important;
  background:linear-gradient(180deg,#17131b 84%,rgba(23,19,27,0))!important;
}
.v13-modalhead .v13-close,
.v48-sitemap-head [data-v48-sitemap-close],
.v364-about-dialog>.v364-about-close,
.v400-how-dialog>.v400-how-close,
.v40-faq-dialog>.v40-faq-close,
.v48-case-dialog>.v48-case-close,
.v81-ai-dialog>.v81-ai-close,
.v339-analysis-dialog>.v339-analysis-close,
.v347-cookie-dialog>.v347-cookie-close,
.v113-legal-dialog>.v113-legal-close,
.v24-help-dialog>.v24-help-close{
  position:sticky!important;
  top:0!important;
  z-index:42!important;
  flex:0 0 46px!important;
  float:right!important;
  right:auto!important;
  margin:0 0 8px 12px!important;
  border-color:var(--v-popup-accent)!important;
  background:var(--v-popup-surface)!important;
  color:var(--v-popup-accent)!important;
  box-shadow:none!important;
}
.v13-modalhead .v13-close{float:none!important;margin:0!important}

/* Graphite dialogs replace bright blue-on-white fills. The accent remains
   stable for default, hover and active states; it is readable on the dark base. */
:is(.v13-modalbox,[role="dialog"]) :is(button,a[role="button"],input[type="button"],input[type="submit"]):not(.v-popup-close):not([aria-label="Close"]):not([class*="close"]),
#v347-cookie-modal .v347-cookie-actions button{
  border-color:var(--v-popup-accent)!important;
  background:color-mix(in srgb,var(--v-popup-accent) 9%,var(--v-popup-surface))!important;
  color:var(--v-popup-accent)!important;
  box-shadow:none!important;
  text-shadow:none!important;
  filter:none!important;
  transform:none!important;
  transition:none!important;
}
:is(.v13-modalbox,[role="dialog"]) :is(button,a[role="button"],input[type="button"],input[type="submit"]):not(.v-popup-close):not([aria-label="Close"]):not([class*="close"]):is(:hover,:active,:focus),
#v347-cookie-modal .v347-cookie-actions button:is(:hover,:active,:focus){
  border-color:var(--v-popup-accent)!important;
  background:color-mix(in srgb,var(--v-popup-accent) 9%,var(--v-popup-surface))!important;
  color:var(--v-popup-accent)!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
}
:is(.v13-modalbox,[role="dialog"]) :is(button,a[role="button"],input[type="button"],input[type="submit"]):not(.v-popup-close):not([aria-label="Close"]):not([class*="close"]):focus-visible,
#v347-cookie-modal .v347-cookie-actions button:focus-visible{
  outline:2px solid var(--v-popup-accent)!important;
  outline-offset:2px!important;
}

/* Cookie rows and actions use the standard and keep their labels legible. */
#v347-cookie-modal .v347-cookie-row>div{display:grid!important;gap:5px!important}
#v347-cookie-modal .v347-cookie-row b,
#v347-cookie-modal .v347-cookie-row span{display:block!important}
#v347-cookie-modal .v347-cookie-actions{display:flex!important;flex-wrap:wrap!important;justify-content:flex-end!important;gap:8px!important;margin-top:16px!important}
#v347-cookie-modal .v347-cookie-actions button{min-height:42px!important;padding:0 14px!important;font-size:10px!important;line-height:1!important;letter-spacing:.055em!important}

/* Panels inside a dialog follow the same graphite surface rather than bringing
   back older blue fills. Their headings retain the dialog's semantic accent. */
:is(
  .v371-build-grid article,
  .v400-how-grid section,
  .v48-sitemap-grid>div,
  #modal-sitemap .v346-sitemap-grid article,
  .v40-faq-content details,
  .v364-about-dialog section,
  .v81-ai-dialog .v81-ai-quick>*
){
  border-color:color-mix(in srgb,var(--v-popup-accent) 32%,transparent)!important;
  background:var(--v-popup-surface)!important;
  box-shadow:none!important;
}
:is(
  .v371-build-modal .eyebrow,
  .v371-build-modal .v371-build-grid b,
  .v400-how-grid h3,
  .v48-sitemap-grid b,
  #modal-sitemap .v346-sitemap-grid h3,
  .v40-faq-content summary
){color:var(--v-popup-accent)!important}
#modal-sitemap .v346-sitemap-box{overflow-y:auto!important}
#modal-sitemap .v346-sitemap-grid a,
#modal-sitemap .v346-sitemap-grid button{border-color:color-mix(in srgb,var(--v-popup-accent) 26%,transparent)!important;color:var(--v402-popup-copy)!important}

/* Only the content alignment of this locked menu button changes; its geometry
   is deliberately left untouched. */
#top .v48-menubar>.v255-roadmap-menu{justify-content:center!important}

/* Extra leading prevents clipping the Czech ring above Ů without changing
   header/footer layout or the display type scale. */
.v253-home .v253-hero-head h1{
  line-height:1.12!important;
  padding-top:.25em!important;
  padding-bottom:.06em!important;
}

@media(max-width:760px){
  :is(
    .v13-modalbox,.v364-about-dialog,.v400-how-dialog,.v40-faq-dialog,
    .v48-sitemap-dialog,.v48-case-dialog,.v81-ai-dialog,.v339-analysis-dialog,
    .v347-cookie-dialog,.v113-legal-dialog,.v24-help-dialog
  ){
    width:100%!important;
    max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
  }
}