/**
 * Genyleap — native n=4 superellipse, narrowly scoped (2026-11-14)
 *
 * Shape owner: CSS corner-shape when supported, otherwise the matching
 * SVG fill + stroke from account-squircle.js. No clip-path on controls,
 * no clipping of floating dropdowns or keyboard-focus targets.
 *
 * Do not change authentication, subscription behavior, logos or theme.
 */

/* 1. Account button: menu is a sibling and must remain unconstrained. */
html body .nav-actions > .account-control {
  overflow: visible !important;
}
html body .nav-actions > .account-control > .account-control-trigger {
  --gl-n4-radius: 18px;
  --gl-n4-fill: var(--primary);
  --gl-n4-stroke: var(--primary);
  --gl-n4-stroke-width: 1px;
  border-radius: var(--gl-n4-radius) !important;
  corner-shape: superellipse(2) !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  box-shadow: none !important;
}
html body .nav-actions > .account-control > .account-control-trigger:hover {
  --gl-n4-fill: var(--primary-strong);
  --gl-n4-stroke: var(--primary-strong);
}
html body .nav-actions > .account-control > .account-control-trigger:focus-visible {
  --gl-n4-stroke-width: 2px;
}

/* 2. One border around the entire service picker. The listbox is a
 * sibling of this button, so it must NOT be clipped by the wrapper. */
html body .account-dashboard .account-service-picker {
  overflow: visible !important;
}
html body .account-dashboard .account-service-picker-trigger {
  --gl-n4-radius: 27px;
  --gl-n4-fill: var(--paper);
  --gl-n4-stroke: color-mix(in srgb,var(--primary) 25%,var(--line));
  --gl-n4-stroke-width: 1px;
  border-radius: var(--gl-n4-radius) !important;
  corner-shape: superellipse(2) !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
html body .account-dashboard .account-service-picker-trigger:hover,
html body .account-dashboard .account-service-picker.is-open .account-service-picker-trigger {
  --gl-n4-stroke: color-mix(in srgb,var(--primary) 58%,var(--line));
}
html body .account-dashboard .account-service-picker-trigger:focus-visible {
  --gl-n4-stroke-width: 2px;
}
html body .account-dashboard .account-service-picker-trigger > :is(
 .account-service-picker-mark,.account-service-picker-value,.account-service-picker-chevron
) {
  box-shadow: none !important;
}
html body .account-dashboard .account-service-picker-menu {
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* 3. Segmented control. The shell owns the outer silhouette; each
 * inset segment owns only its own silhouette. Do not add rectangular
 * separators, extra borders or end-caps at the shell edges. */
html body .account-dashboard .gc-vpn-modes {
  --gl-n4-radius: 25px;
  --gl-n4-fill: color-mix(in srgb,var(--soft) 72%,var(--paper));
  --gl-n4-stroke: color-mix(in srgb,var(--primary) 12%,var(--line));
  --gl-n4-stroke-width: 1px;
  border-radius: var(--gl-n4-radius) !important;
  corner-shape: superellipse(2) !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  overflow: visible !important;
  box-shadow: none !important;
}
html body .account-dashboard .gc-vpn-modes > .gc-vpn-mode {
  --gl-n4-radius: 19px;
  --gl-n4-fill: transparent;
  --gl-n4-stroke: transparent;
  --gl-n4-stroke-width: 1px;
  position: relative;
  border-radius: var(--gl-n4-radius) !important;
  corner-shape: superellipse(2) !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  box-shadow: none !important;
  transform: none !important;
}
html body .account-dashboard .gc-vpn-modes > .gc-vpn-mode.is-active {
  --gl-n4-fill: var(--paper);
  --gl-n4-stroke: color-mix(in srgb,var(--primary) 19%,var(--line));
}
html body .account-dashboard .gc-vpn-modes > .gc-vpn-mode:not(.is-active):hover {
  --gl-n4-fill: color-mix(in srgb,var(--paper) 55%,transparent);
}
html body .account-dashboard .gc-vpn-modes > .gc-vpn-mode:focus-visible {
  --gl-n4-stroke: var(--primary);
  --gl-n4-stroke-width: 2px;
}
html body .account-dashboard .gc-vpn-modes > .gc-vpn-mode:not(.is-active) {
  border-color: transparent !important;
}

/* The browser without native corner-shape gets exact n=4 path masks.
 * ::before paints the fill; ::after paints the border on the SAME curve.
 * Pseudoelements preserve child order and do not affect accessibility.
 * No clipping is used on the buttons, shell, or floating menu. */
html body .nav-actions > .account-control > .account-control-trigger.gl-n4-svg,
html body .account-dashboard .account-service-picker-trigger.gl-n4-svg,
html body .account-dashboard .gc-vpn-modes.gl-n4-svg,
html body .account-dashboard .gc-vpn-modes > .gc-vpn-mode.gl-n4-svg {
  position: relative !important;
  isolation: isolate;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  corner-shape: round !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  overflow: visible !important;
}
html body .gl-n4-svg::before,
html body .gl-n4-svg::after {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  display: block !important;
  /* Negative stacking level keeps labels, text-based flags and masked SVG
     icons above the painted shape. Previously the full fill was overlaid
     on unwrapped text and caused glyphs to disappear. */
  z-index: -1 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}
html body .gl-n4-svg::before {
  background-color: var(--gl-n4-fill) !important;
  -webkit-mask-image: var(--gl-n4-mask-fill) !important;
  mask-image: var(--gl-n4-mask-fill) !important;
}
html body .gl-n4-svg::after {
  background-color: var(--gl-n4-stroke) !important;
  -webkit-mask-image: var(--gl-n4-mask-stroke) !important;
  mask-image: var(--gl-n4-mask-stroke) !important;
}
/* Leave real children in their authored layout: forced position/z-index
   broke masked icons and absolute descendants. Pseudo paint is at -1. */
html body .nav-actions > .account-control > .account-control-trigger.gl-n4-svg:focus-visible,
html body .account-dashboard .account-service-picker-trigger.gl-n4-svg:focus-visible,
html body .account-dashboard .gc-vpn-modes > .gc-vpn-mode.gl-n4-svg:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

@media (max-width: 680px) {
  html body .account-dashboard .account-service-picker-trigger { --gl-n4-radius: 23px; }
  html body .account-dashboard .gc-vpn-modes { --gl-n4-radius: 21px; }
  html body .account-dashboard .gc-vpn-modes > .gc-vpn-mode { --gl-n4-radius: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .account-dashboard .gc-vpn-modes > .gc-vpn-mode { transition: none !important; }
}


/* N4 2026-11-14 detail pass: only the highlighted account surfaces.
 * N4 native path for supported engines, identical SVG silhouette for
 * unsupported engines. No changes to app logic, icons, or semantic colors. */

/* Sidebar shell and selected navigation. */
html body .account-dashboard .account-sidebar {
  --gl-n4-radius: 38px;
  --gl-n4-fill: var(--paper);
  --gl-n4-stroke: var(--line);
  --gl-n4-stroke-width: 1px;
  border-radius: 38px !important;
  corner-shape: superellipse(2) !important;
}
html[data-theme="dark"] body .account-dashboard .account-sidebar {
  /* background-color does not accept a gradient; Safari fallback paints
     this solid color while native surfaces retain their authored gradient. */
  --gl-n4-fill: #0a110e;
}
html body .account-dashboard .account-side-nav button:not(.account-logout) {
  --gl-n4-radius: 18px;
  --gl-n4-fill: transparent;
  --gl-n4-stroke: transparent;
  --gl-n4-stroke-width: 1px;
  border-radius: 18px !important;
  corner-shape: superellipse(2) !important;
}
html body .account-dashboard .account-side-nav button:not(.account-logout):is(:hover,.is-active) {
  --gl-n4-fill: var(--soft);
}
html[data-theme="dark"] body .account-dashboard .account-side-nav button:not(.account-logout).is-active {
  --gl-n4-fill: #12312b;
}
html body .account-dashboard .account-side-nav button:not(.account-logout):focus-visible {
  --gl-n4-stroke: var(--primary);
  --gl-n4-stroke-width: 2px;
}

/* Open service chooser: one menu silhouette, independently shaped options.
 * The icon tile and optional Free/Active badge follow the same contour. */
html body .account-dashboard .account-service-picker-menu {
  --gl-n4-radius: 27px;
  --gl-n4-fill: var(--paper);
  --gl-n4-stroke: color-mix(in srgb,var(--primary) 22%,var(--line));
  --gl-n4-stroke-width: 1px;
  border-radius: 27px !important;
  corner-shape: superellipse(2) !important;
}
html body .account-dashboard .account-service-picker-option {
  --gl-n4-radius: 20px;
  --gl-n4-fill: transparent;
  --gl-n4-stroke: transparent;
  --gl-n4-stroke-width: 1px;
  border-radius: 20px !important;
  corner-shape: superellipse(2) !important;
}
html body .account-dashboard .account-service-picker-option.is-selected {
  --gl-n4-fill: color-mix(in srgb,var(--primary) 5%,var(--paper));
}
html body .account-dashboard .account-service-picker-option:is(:hover,:focus-visible) {
  --gl-n4-fill: color-mix(in srgb,var(--primary) 8%,var(--paper));
  --gl-n4-stroke: color-mix(in srgb,var(--primary) 24%,var(--line));
}
html body .account-dashboard .account-service-picker-option:focus-visible {
  --gl-n4-stroke-width: 2px;
}
html body .account-dashboard .account-service-picker-mark {
  --gl-n4-radius: 17px;
  --gl-n4-fill: color-mix(in srgb,var(--primary) 9%,var(--paper));
  --gl-n4-stroke: color-mix(in srgb,var(--primary) 12%,var(--line));
  --gl-n4-stroke-width: 1px;
  border-radius: 17px !important;
  corner-shape: superellipse(2) !important;
}
html body .account-dashboard .account-service-picker-mark.is-tilmach {
  --gl-n4-fill: color-mix(in srgb,var(--soft) 90%,var(--paper));
  --gl-n4-stroke: var(--line);
}
html body .account-dashboard .account-service-picker-status {
  --gl-n4-radius: 13px;
  --gl-n4-fill: color-mix(in srgb,var(--soft) 84%,var(--paper));
  --gl-n4-stroke: transparent;
  --gl-n4-stroke-width: 1px;
  border-radius: 13px !important;
  corner-shape: superellipse(2) !important;
}
html body .account-dashboard .account-service-picker-status.is-active {
  --gl-n4-fill: color-mix(in srgb,var(--primary) 12%,var(--paper));
}

/* VPN subscription: clip child row backgrounds to the *same* n=4 card
 * outline. Small icon tiles and the four metrics use inset N4 surfaces. */
html body .account-dashboard .gc-sub-card {
  --gl-n4-radius: 35px;
  --gl-n4-fill: var(--paper);
  --gl-n4-stroke: var(--line);
  --gl-n4-stroke-width: 1px;
  border-radius: 35px !important;
  corner-shape: superellipse(2) !important;
}
html body .account-dashboard .gc-sub-mark {
  --gl-n4-radius: 18px;
  --gl-n4-fill: color-mix(in srgb,var(--gc-accent) 11%,var(--paper));
  --gl-n4-stroke: color-mix(in srgb,var(--gc-accent) 14%,var(--line));
  --gl-n4-stroke-width: 1px;
  border-radius: 18px !important;
  corner-shape: superellipse(2) !important;
}
html body .account-dashboard .gc-sub-status {
  --gl-n4-radius: 17px;
  --gl-n4-fill: color-mix(in srgb,var(--gc-accent) 10%,var(--paper));
  --gl-n4-stroke: transparent;
  --gl-n4-stroke-width: 1px;
  border-radius: 17px !important;
  corner-shape: superellipse(2) !important;
}
html body .account-dashboard .gc-sub-stat {
  --gl-n4-radius: 21px;
  --gl-n4-fill: color-mix(in srgb,var(--soft) 65%,var(--paper));
  --gl-n4-stroke: var(--line);
  --gl-n4-stroke-width: 1px;
  border-radius: 21px !important;
  corner-shape: superellipse(2) !important;
}

/* Non-native (e.g. Safari/Firefox) — no global clip-path on controls.
 * The shared account-squircle.js manages SVG masks at actual element size.
 * Keep native layout positions: sticky sidebar and absolute menu. */
html body .account-dashboard :is(
  .account-sidebar, .account-side-nav button:not(.account-logout),
  .account-service-picker-menu,.account-service-picker-option,
  .account-service-picker-mark,.account-service-picker-status,
  .gc-sub-mark,.gc-sub-status,.gc-sub-stat
).gl-n4-svg {
  isolation: isolate;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  corner-shape: round !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}
html body .account-dashboard :is(
  .account-side-nav button:not(.account-logout),
  .account-service-picker-option,.account-service-picker-mark,
  .account-service-picker-status,.gc-sub-mark,.gc-sub-status,.gc-sub-stat
).gl-n4-svg {
  position: relative !important;
}
html body .account-dashboard .account-service-picker-menu.gl-n4-svg {
  position: absolute !important;
}
html body .account-dashboard .account-sidebar.gl-n4-svg {
  /* Sticky behavior must survive decorative fallback rendering. */
  position: sticky !important;
  overflow: visible !important;
}
html body .account-dashboard :is(
  .account-side-nav button:not(.account-logout),
  .account-service-picker-option,.account-service-picker-menu
).gl-n4-svg:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* A subscription card is a *composite*: unlike a button, its internal
 * tinted action rows must also be masked along the parent's contour.
 * A single mask applies to descendants; ::after paints the inset stroke. */
html body .account-dashboard .gc-sub-card.gl-n4-frame {
  position: relative !important;
  /* Parent SVG mask clips all children to n=4 already. Avoid a second
     rectangular overflow clip shaving the 1px curved outline. */
  overflow: visible !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  corner-shape: round !important;
  box-shadow: none !important;
  background: var(--paper) !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  -webkit-mask-image: var(--gl-n4-mask-fill) !important;
  mask-image: var(--gl-n4-mask-fill) !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}
html body .account-dashboard .gc-sub-card.gl-n4-frame::after {
  content: "" !important;
  position: absolute !important;
  z-index: 5 !important;
  pointer-events: none !important;
  inset: -1px !important;
  background: var(--gl-n4-stroke) !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-mask-image: var(--gl-n4-mask-stroke) !important;
  mask-image: var(--gl-n4-mask-stroke) !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}
@media (max-width: 680px) {
  html body .account-dashboard .account-sidebar { --gl-n4-radius: 26px; border-radius: 26px !important; }
  html body .account-dashboard .account-service-picker-menu { --gl-n4-radius: 22px; border-radius: 22px !important; }
  html body .account-dashboard .account-service-picker-option { --gl-n4-radius: 16px; border-radius: 16px !important; }
  html body .account-dashboard .gc-sub-card { --gl-n4-radius: 26px; border-radius: 26px !important; }
  html body .account-dashboard .gc-sub-stat { --gl-n4-radius: 17px; border-radius: 17px !important; }
}

/* On tablets and phones the sidebar is in normal flow, never sticky. */
@media(max-width:980px){
  html body .account-dashboard .account-sidebar.gl-n4-svg{
    position:static !important;
  }
}