/* Derived from labs/contact-block-2026-09-16/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. */
.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;
}
.imp-stage.is-system-story .ims-panel::after {
  content: "";
  position: absolute;
  inset: var(--ims-clip-inset, 0px);
  z-index: 7;
  border: 1px solid #a67bce33;
  border-radius: var(--ims-clip-radius, 0px);
  opacity: calc(1 - var(--ims-open, 1));
  pointer-events: none;
}