/* The client portal directory.

   One centred card on a quiet page. It is the first thing a customer's staff
   see of BizOS, often on a phone at a counter, so it asks one question and
   gets out of the way.

   Classes from bizos/css are used as shipped. No inline styles: this page
   ships the same CSP as the panel. */

.hidden { display: none !important; }

body { background: var(--c-canvas); margin: 0;
       min-height: 100vh; min-height: 100dvh;
       -webkit-text-size-adjust: 100%; }

.dir { min-height: 100vh; min-height: 100dvh;
       display: flex; flex-direction: column;
       align-items: center; justify-content: center;
       gap: var(--s6);
       padding: max(var(--s5), env(safe-area-inset-top))
                max(var(--s5), env(safe-area-inset-right))
                max(var(--s5), env(safe-area-inset-bottom))
                max(var(--s5), env(safe-area-inset-left)); }

.dir-card { background: var(--c-bg); border: 1px solid var(--c-border);
            border-radius: var(--r-lg); box-shadow: var(--sh-md);
            padding: var(--s6); width: 100%; max-width: 420px; }

.dir-mark { height: 34px; width: auto; display: block; margin-bottom: var(--s5); }

.dir-h   { margin: 0 0 var(--s2); font-size: var(--t-2xl); }
.dir-sub { margin: 0 0 var(--s5); color: var(--c-ink-2);
           font-size: var(--t-md); line-height: 1.5; }

.dir-form  { display: flex; flex-direction: column; gap: var(--s3); }
.dir-label { font-size: var(--t-sm); font-weight: 600; color: var(--c-ink-2); }

/* 16px, always. Anything smaller and iOS zooms the page the moment the field
   is focused, and there is no way back without pinching. */
.dir-input { font-size: 16px; height: 44px; }

.dir-remember { display: flex; align-items: center; gap: var(--s2);
                font-size: var(--t-sm); color: var(--c-ink-2);
                min-height: 44px; cursor: pointer; }
.dir-remember input { width: 16px; height: 16px; flex: none; }

.dir-go { height: 44px; font-size: var(--t-md); }

/* The returning-visitor shortcut, above the form so it is the obvious path. */
.dir-back   { height: 44px; width: 100%; margin-bottom: var(--s2);
              border-color: var(--c-brand); color: var(--c-brand);
              font-weight: 600; }
.dir-forget { display: block; margin: 0 auto var(--s5); border: 0;
              background: none; color: var(--c-ink-3); font: inherit;
              font-size: var(--t-sm); cursor: pointer;
              text-decoration: underline; min-height: 44px; }

.dir-msg        { margin: var(--s2) 0 0; font-size: var(--t-sm); line-height: 1.5; }
.dir-msg.is-ok  { color: var(--c-ok); }
.dir-msg.is-warn{ color: var(--c-warn); }
.dir-msg.is-bad { color: var(--c-bad); }

.dir-help { margin: var(--s5) 0 0; padding-top: var(--s4);
            border-top: 1px solid var(--c-border);
            font-size: var(--t-sm); color: var(--c-ink-3); line-height: 1.6; }
/* The two links here are the fallback for somebody who cannot get in, so
   they are the last thing that should be hard to hit. Inline they measured
   15px tall; as blocks they are a real target, and on a phone that is the
   difference between calling and giving up. */
.dir-help a { color: var(--c-brand); display: inline-block;
              min-height: 44px; line-height: 44px; }
@media (max-width: 480px) {
  .dir-help   { text-align: center; }
  .dir-help a { display: block; }
}

.dir-foot { margin: 0; }
.dir-gt   { height: 22px; width: auto; display: block; opacity: .75; }

@media (max-width: 480px) {
  /* A card with a border and a shadow looks like a card on a desk and like a
     seam on a phone. Below 480 it becomes the page. */
  .dir      { padding: 0; justify-content: flex-start; gap: var(--s5); }
  .dir-card { border: 0; border-radius: 0; box-shadow: none;
              max-width: none; min-height: 100dvh;
              padding: max(var(--s6), env(safe-area-inset-top)) var(--s5) var(--s6); }
  .dir-foot { padding-bottom: max(var(--s5), env(safe-area-inset-bottom)); }
}