/* The portal sheet: the client portal as a pop-in over the public site
   (assets/js/portal-sheet.js, docs/PORTAL_SHEET.md). Linked into every public
   page's <head> by server-lib/inject-portal-bridge.js. Tokens only.

   The <dialog> fills the viewport and is see-through; the panel inside it is
   the sheet. That way a click on the dialog itself is a click on the dimmed
   page, and the panel can sit anywhere in it by tier:

     compact  sign-in and account recovery: a small dialog, as tall as the
              page inside it says it is (--ds-sheet-frame-h)
     drawer   saved listings, saved searches, matches, messages: right edge
     full     the dashboard: a large overlay

   Under 768px every tier is a bottom sheet. Two more values arrive from the
   script: --ds-sheet-drag (how far a swipe has pulled it down) and
   --ds-sheet-kb (how much of the screen the on-screen keyboard covers). */

.ps-sheet {
  --ds-sheet-drag: 0px;
  --ds-sheet-kb: 0px;
  --ds-sheet-frame-h: 0px;
  --ds-sheet-head: 56px;
  --ds-sheet-margin: var(--ds-space-6);
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--ds-sheet-margin);
  border: 0;
  background: transparent;
  color: var(--ds-fg);
  font-family: var(--ds-font-sans);
  overflow: hidden;
  overscroll-behavior: contain;
}

.ps-sheet[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ps-sheet::backdrop {
  background: var(--ds-scrim-soft);
}

.ps-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-2);
  overflow: hidden;
  transform: translateY(var(--ds-sheet-drag));
  transition: transform var(--ds-base) var(--ds-ease);
}

.ps-sheet.is-dragging .ps-panel {
  transition: none;
}

/* ── Title bar ── */
.ps-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  flex: 0 0 var(--ds-sheet-head);
  min-height: var(--ds-sheet-head);
  padding: 0 var(--ds-space-2) 0 var(--ds-space-5);
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-bg);
}

.ps-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ds-fg);
  font-family: var(--ds-font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-sm);
  background: transparent;
  color: var(--ds-fg);
  cursor: pointer;
  transition: background-color var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease);
}

.ps-icon-btn:hover {
  border-color: var(--ds-border);
  background: var(--ds-surface-alt);
}

.ps-icon-btn:focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 2px;
}

.ps-icon-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
}

/* The grab bar shows only on the bottom sheet. */
.ps-handle {
  display: none;
}

/* ── Body: the frame, and a loading line until the frame says it is ready ── */
.ps-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--ds-bg);
}

.ps-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--ds-bg);
  color-scheme: normal;
}

.ps-loading {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--ds-fg-muted);
  font-size: 15px;
}

.ps-sheet.is-loading .ps-loading {
  display: flex;
}

.ps-sheet.is-loading .ps-frame {
  visibility: hidden;
}

/* ── Tiers, 768px and up ── */

/* Compact: centred, as tall as its content, never taller than the screen. */
.ps-sheet--compact .ps-panel {
  max-width: 480px;
  max-height: 100%;
}

.ps-sheet--compact .ps-body {
  flex: 0 0 auto;
}

.ps-sheet--compact .ps-frame {
  height: clamp(320px, var(--ds-sheet-frame-h), calc(100dvh - 2 * var(--ds-sheet-margin) - var(--ds-sheet-head) - 2px));
}

/* Drawer: the right edge, full height. */
.ps-sheet--drawer {
  padding: 0;
}

.ps-sheet--drawer[open] {
  align-items: stretch;
  justify-content: flex-end;
}

.ps-sheet--drawer .ps-panel {
  max-width: 600px;
  height: 100%;
  border-width: 0 0 0 1px;
  border-radius: 0;
}

/* Full: a large overlay with the page still showing round its edge. */
.ps-sheet--full[open] {
  align-items: stretch;
}

.ps-sheet--full .ps-panel {
  max-width: 1160px;
  height: 100%;
}

/* ── Opening ── */
@keyframes ps-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ps-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes ps-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(var(--ds-sheet-drag)); }
}

.ps-sheet[open] .ps-panel {
  animation: ps-rise var(--ds-base) var(--ds-ease);
}

.ps-sheet--drawer[open] .ps-panel {
  animation: ps-slide-in var(--ds-slow) var(--ds-ease);
}

/* ── Bottom sheet, under 768px ── */
@media (max-width: 767px) {
  .ps-sheet {
    --ds-sheet-margin: 0px;
    padding: 0;
  }

  .ps-sheet[open],
  .ps-sheet--drawer[open],
  .ps-sheet--full[open] {
    align-items: flex-end;
    justify-content: center;
  }

  .ps-sheet .ps-panel,
  .ps-sheet--compact .ps-panel,
  .ps-sheet--drawer .ps-panel,
  .ps-sheet--full .ps-panel {
    max-width: none;
    margin-bottom: var(--ds-sheet-kb);
    border-width: 1px 0 0;
    border-radius: var(--ds-radius-md) var(--ds-radius-md) 0 0;
  }

  .ps-sheet[open] .ps-panel,
  .ps-sheet--drawer[open] .ps-panel {
    animation: ps-slide-up var(--ds-slow) var(--ds-ease);
  }

  /* The bar is the grip: the whole title bar drags, the bar says so. */
  .ps-head {
    touch-action: none;
    cursor: grab;
  }

  .ps-handle {
    display: block;
    position: absolute;
    top: 6px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: var(--ds-radius-full);
    background: var(--ds-border);
  }

  /* Compact: as tall as the form, up to the space above the keyboard. */
  .ps-sheet--compact .ps-frame {
    height: clamp(280px, var(--ds-sheet-frame-h), calc(100dvh - var(--ds-sheet-kb) - var(--ds-sheet-head) - var(--ds-space-6)));
  }

  /* Drawer: nearly the whole screen, with a strip of the page left showing
     above it so it still reads as a layer over that page. */
  .ps-sheet--drawer .ps-panel {
    height: calc(100dvh - var(--ds-sheet-kb) - var(--ds-space-6));
  }

  /* Full: the whole screen. */
  .ps-sheet--full .ps-panel {
    height: calc(100dvh - var(--ds-sheet-kb));
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-sheet[open] .ps-panel,
  .ps-sheet--drawer[open] .ps-panel {
    animation: none;
  }

  .ps-panel {
    transition: none;
  }
}