/* Derived from new-home/contact/patches/improving-rest.css by build.mjs — edit it there. */
/* Improving panel — resting geometry, one owner for CSS and the story clip.
   Patch for code/site/css/97b-improving-system.css (see README).

   1. The resting card stands on the page gutter (--g, the ladder of
      01-header.css / 14b-footer.css). Canon had its own steps 24 / 16 / 8,
      so above 1100 and at 721…1099 the purple edge stood off the line of the
      header, the footer and the contact card under it.
   2. The story clip reads the same two numbers (improving-system.js), so the
      panel opens from exactly the card it rests as, and closes back into it
      at the end of the story: rounded corners on both ends, both directions.
   3. While the story clip is not fully open, the card edge line is drawn on
      the clip — the resting card in story mode looks like the static one.
   4. The clip itself lives here, not in the script (Alexa, 20.09.2026). The
      stage now carries the story statically, so the panel is a viewport-tall
      box from the first layout, and what makes it a card is the clip. The
      script only moves three numbers; with none of them set — before it runs,
      above the pin, below the story — the clip is the resting card. */
.imp-system {
  --ims-rest-inset: var(--g, 24px);
  --ims-rest-radius: 32px;
}
@media (max-width: 1200px)   { .imp-system { --ims-rest-inset: var(--g, 20px); } }
@media (max-width: 1024px)   { .imp-system { --ims-rest-inset: var(--g, 16px); } }
@media (max-width: 768px)    { .imp-system { --ims-rest-inset: var(--g, 12px); } }
@media (max-width: 719.98px) { .imp-system { --ims-rest-radius: 22px; } }
@media (max-width: 519.98px) { .imp-system { --ims-rest-inset: var(--g, 8px); } }
@media (max-width: 375px)    { .imp-system { --ims-rest-inset: var(--g, 6px); } }

.imp-system .ims-panel {
  margin: 0 var(--ims-rest-inset);
  border-radius: var(--ims-rest-radius);
}
.imp-stage.is-system-story .ims-panel {
  margin: 0;
  border-radius: 0;
  clip-path: inset(var(--ims-clip-inset, var(--ims-rest-inset)) round var(--ims-clip-radius, var(--ims-rest-radius)));
}
.imp-stage.is-system-story .ims-panel::after {
  content: "";
  position: absolute;
  inset: var(--ims-clip-inset, var(--ims-rest-inset));
  z-index: 7;
  border: 1px solid #a67bce33;
  border-radius: var(--ims-clip-radius, var(--ims-rest-radius));
  opacity: calc(1 - var(--ims-open, 0));
  pointer-events: none;
}