/* Genstone Resources — shared base.
   Every tool's root carries `.gsr`. The tokens below read the active theme's
   custom properties (so Theme Settings → Branding recolors the tools) and fall
   back to the Genstone defaults when the plugin runs on a theme without them. */
.gsr{
  --gsr-navy:var(--gs-navy,#002c51);
  --gsr-navy-dark:var(--gs-navy-dark,#111e4a);
  --gsr-navy-light:var(--gs-navy-light,#2a4080);
  --gsr-primary:var(--gs-blue,#00569e);
  --gsr-primary-dark:var(--gs-blue-dark,#003e75);
  --gsr-secondary:var(--gs-orange,#e87624);
  --gsr-secondary-dark:var(--gs-orange-dark,#cc6820);
  --gsr-text:var(--gs-text,#374151);
  --gsr-text-dark:var(--gs-text-dark,#18211f);
  --gsr-muted:var(--gs-muted,#6b7280);
  --gsr-border:var(--gs-border,#e2e8f0);
  --gsr-light:var(--gs-light,#f2f2f2);
  /* The dark results panel is a gradation of the theme's Primary color: from the
     Primary itself to its darker shade, with a soft lighter glow in one corner.
     Both calculators' results panels read these, so one place sets the look. */
  --gsr-panel-from:var(--gsr-primary);
  --gsr-panel-to:var(--gsr-primary-dark);
  --gsr-panel-glow:color-mix(in srgb,color-mix(in srgb,var(--gsr-primary) 62%,#fff) 55%,transparent);
  --gsr-red:#c0392b;
  --gsr-good:#5ddc9a;
  --gsr-bad:#ff8f7a;

  --gsr-radius:12px;
  --gsr-radius-sm:8px;
  --gsr-shadow:0 2px 6px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.1);

  font-family:var(--gs-font,'Inter'), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color:var(--gsr-text);
  max-width:1200px;
  margin:0 auto;
  padding:clamp(16px,3vw,32px) 0;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* Layout reacts to the width the tool is given (a half-width column, a popup),
     not the screen's. */
  container-type:inline-size;
  container-name:gsr;
}
.gsr *,.gsr *::before,.gsr *::after{box-sizing:border-box;}
.gsr p{margin:0;}
.gsr [hidden]{display:none!important;}
.gsr-sr{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.gsr-notice{padding:12px 16px;border:1px solid #f0b429;background:#fffbea;color:#7a5b00;border-radius:6px;}
@media (prefers-reduced-motion:reduce){
  .gsr *{transition-duration:.01ms!important;animation-duration:.01ms!important;}
}

/* ---------- Results → contact form flip ----------
   A results panel with a chosen Gravity Form carries .gsr-flip. The CTA turns
   the panel edge-on, swaps front for back, and turns it back to face. */
@keyframes gsr-flip-out{from{transform:perspective(1200px) rotateY(0);}to{transform:perspective(1200px) rotateY(90deg);}}
@keyframes gsr-flip-in{from{transform:perspective(1200px) rotateY(-90deg);}to{transform:perspective(1200px) rotateY(0);}}
.gsr .gsr-flip.is-flip-out{animation:gsr-flip-out .22s ease-in forwards;}
.gsr .gsr-flip.is-flip-in{animation:gsr-flip-in .26s ease-out;}
.gsr .gsr-flip.is-flipped{
  /* The theme's gray sheen (.gs-bg--light): a 120deg gradation from gray to white. */
  background-color:rgba(190,190,190,.4);
  background-image:linear-gradient(120deg,
    rgba(195,195,195,.42) 0%,rgba(230,230,230,.5) 8%,rgba(215,215,215,.42) 15%,
    rgba(245,245,245,.7) 22%,rgba(255,255,255,.9) 32%,rgba(250,250,250,.88) 42%,
    rgba(255,255,255,.95) 50%,rgba(250,250,250,.88) 58%,rgba(255,255,255,.9) 68%,
    rgba(245,245,245,.7) 78%,rgba(215,215,215,.42) 85%,rgba(230,230,230,.5) 92%,
    rgba(195,195,195,.42) 100%);
  color:var(--gsr-text);
  /* Not sticky while the form is showing: the form is long, and a stuck panel
     makes you wait for the content beside it to finish scrolling. Back to sticky
     when the form is closed. */
  position:relative;top:auto;
  scroll-margin-top:calc(var(--gs-header-h,100px) + 24px);
}
.gsr-flip__back{padding:clamp(22px,3vw,30px);outline:0;}
.gsr-flip__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid var(--gsr-border);}
.gsr-flip__title{font-size:18px;font-weight:700;line-height:1.3;color:var(--gsr-text-dark);}
.gsr-flip__close{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--gsr-border);border-radius:var(--gsr-radius-sm);background:#fff;color:var(--gsr-text-dark);font-weight:600;font-size:14px;line-height:1;font-family:inherit;cursor:pointer;transition:background .15s,border-color .15s;}
.gsr-flip__close:hover,.gsr-flip__close:focus-visible{background:var(--gsr-light);border-color:var(--gsr-muted);}
.gsr-flip__close:focus-visible{outline:2px solid var(--gsr-primary);outline-offset:2px;}
.gsr-flip__close span{font-size:20px;line-height:.8;}
.gsr-flip__content{margin:0 0 18px;font-size:16px;line-height:1.6;color:var(--gsr-text-dark);}
.gsr-flip__content p{margin:0 0 .6em;}.gsr-flip__content p:last-child{margin-bottom:0;}
.gsr-flip__content a{color:var(--gsr-primary);font-weight:600;}