/* ==========================================================================
   HAVEN. — the footer and the request panel.

   The panel is a real dialog: core/utils.js traps Tab inside it and locks the
   page behind it, Escape closes it, and it slides in from the side rather than
   appearing in the middle of the screen, because the brief asks for a refined
   in-page panel rather than a modal box.
   ========================================================================== */
.foot {
  background: var(--night);
  color: var(--chalk);
  padding: 10vh 0 3rem;
}
.foot__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(245, 241, 232, .18);
}
.foot__place { color: rgba(245, 241, 232, .45); margin-left: .6rem; font-size: .5em; }
.foot__tagline { color: rgba(245, 241, 232, .6); }

.foot__cols {
  display: grid;
  gap: 2.6rem;
  padding: 3rem 0;
}
.foot__head { color: rgba(245, 241, 232, .45); margin-bottom: 1.1rem; }
.foot__about { font-size: .92rem; line-height: 1.55; color: rgba(245, 241, 232, .78); margin: 0; }
.foot__intents button, .foot__langs button {
  border: 0; background: none; color: inherit; cursor: pointer;
  padding: .35rem 0; text-align: left;
  font-size: .82rem; font-weight: 500; letter-spacing: .06em;
  position: relative;
}
.foot__intents button::after, .foot__langs button::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .2rem; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.foot__intents button:hover::after, .foot__langs button:hover::after { transform: scaleX(1); }
.foot__principles li { color: rgba(245, 241, 232, .6); padding: .3rem 0; }
.foot__langs [aria-current="true"] { color: var(--sun); }
.lang__draft {
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(245, 241, 232, .4); margin-left: .5rem;
}

.foot__base {
  display: grid;
  gap: 1.4rem;
  padding-top: 2.6rem;
  border-top: 1px solid rgba(245, 241, 232, .18);
}
.foot .demo-note { color: rgba(245, 241, 232, .48); border-left-color: rgba(245, 241, 232, .2); margin: 0; }
.foot__rights { color: rgba(245, 241, 232, .4); }

@media (min-width: 760px) {
  .foot__cols { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}

/* --- the panel ------------------------------------------------------------ */
.scrim {
  position: fixed; inset: 0;
  background: rgba(11, 82, 100, .5);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility .45s;
  z-index: 40;
}
.is-panel-open .scrim { opacity: 1; visibility: visible; }

.panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 100vw);
  background: var(--chalk);
  padding: 2.4rem var(--gutter) 3rem;
  overflow-y: auto;
  z-index: 45;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .6s var(--ease-window), visibility .6s;
}
.is-panel-open .panel { transform: none; visibility: visible; }

.panel__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  margin-bottom: 1rem;
}
.panel__close {
  border: 1px solid var(--ink-18); background: none; cursor: pointer;
  width: 2.6rem; height: 2.6rem; flex: none;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.panel__close:hover { background: var(--ink); color: var(--chalk); }

.form { margin-top: 2rem; }
.form__grid { display: grid; gap: 1.4rem; }
.field { margin: 0; display: grid; gap: .45rem; }
.field__label { color: var(--ink-45); }
.field__opt { text-transform: none; letter-spacing: .04em; margin-left: .4rem; opacity: .7; }
.field__input {
  font: inherit;
  font-size: .95rem;
  padding: .8rem .9rem;
  border: 1px solid var(--ink-18);
  background: rgba(255, 255, 255, .55);
  border-radius: 0;
  width: 100%;
  transition: border-color .3s var(--ease);
}
.field__input:focus { border-color: var(--deep); }
textarea.field__input { resize: vertical; }

.form__errors {
  margin: 1.4rem 0 0;
  font-size: .85rem;
  color: var(--boug);
  border-left: 2px solid var(--boug);
  padding-left: .8rem;
}
.form__foot { margin-top: 2rem; display: grid; gap: 1.2rem; justify-items: start; }
.form__blocked {
  font-size: .85rem; color: var(--deep); margin: 0;
  border-left: 2px solid var(--sea); padding-left: .8rem;
}

@media (min-width: 560px) {
  .form__grid { grid-template-columns: 1fr 1fr; }
  .field--wide { grid-column: 1 / -1; }
}