/* ==========================================================================
   LMSA member app — auth screens, directory, profile, installable shell.
   Loads after site.css and reuses its tokens. Tuned for a phone first, and
   for running full-screen from the iOS home screen.
   ========================================================================== */

/* iOS niceties: no tap flash, no rubber-band chaining, momentum scroll */
html.app{-webkit-text-size-adjust:100%}
.app body,body.app{overscroll-behavior-y:contain;-webkit-tap-highlight-color:transparent}
.app *{-webkit-touch-callout:none}
.app input,.app textarea,.app select{-webkit-touch-callout:default;-webkit-user-select:text;user-select:text}

/* iOS zooms any focused field whose text is under 16px. Never go below it. */
.app input,.app select,.app textarea{font-size:16px}

/* ---------- auth shell ---------- */
.auth{
  min-height:100svh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:var(--ground);
}
.auth-head{
  display:flex;justify-content:center;
  padding:clamp(28px,7vw,56px) var(--gutter) 0;
}
.auth-logo{display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none;color:inherit}
.auth-logo svg{width:84px;height:84px}
.auth-logo b{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.015em}
.auth-logo span{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--ink-3)}

.auth-body{display:flex;align-items:flex-start;justify-content:center;padding:clamp(24px,5vw,40px) var(--gutter)}
.auth-card{
  width:100%;max-width:400px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:3px;
  padding:clamp(22px,5vw,30px);
}
.auth-card h1{font-size:clamp(25px,5vw,31px);letter-spacing:-.02em}
.auth-card>p.sub{margin-top:9px;color:var(--ink-2);font-size:14.5px;max-width:42ch}

.auth-form{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.f{display:flex;flex-direction:column;gap:7px}
.f label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.f input{
  font-family:var(--body);padding:13px 14px;
  border:1px solid var(--line);background:var(--ground);color:var(--ink);
  border-radius:2px;width:100%;
}
.f input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.f input[aria-invalid="true"]{border-color:var(--accent)}
.f .hint{font-size:12.5px;color:var(--ink-3)}
.f .err{font-size:12.5px;color:var(--accent);font-weight:600}

.pw-wrap{position:relative;display:flex}
.pw-wrap input{padding-right:62px}
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:transparent;border:0;cursor:pointer;color:var(--ink-3);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 10px;border-radius:2px;
}
.pw-toggle:hover{color:var(--ink)}

.auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.check{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-2);cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--accent);flex:none}
.auth-link{font-size:14px;color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
.auth-link:hover{border-bottom-color:currentColor}

.btn-block{width:100%;padding:14px 20px;font-size:15px}
.btn[disabled]{opacity:.55;cursor:not-allowed;filter:none}

.auth-alt{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:14px;color:var(--ink-2);text-align:center;
}
.auth-foot{
  padding:20px var(--gutter) calc(20px + env(safe-area-inset-bottom,0px));
  text-align:center;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase;
}

/* banner messages */
.banner{
  display:flex;gap:11px;align-items:flex-start;
  padding:13px 15px;border-radius:2px;font-size:14px;line-height:1.5;
  border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface));
  color:var(--ink);
}
.banner.good{border-left-color:var(--good);background:color-mix(in srgb,var(--good) 10%,var(--surface))}
.banner.info{border-left-color:var(--brass);background:color-mix(in srgb,var(--brass) 10%,var(--surface))}
.banner b{display:block;margin-bottom:3px}

/* demo credential helper — delete with the mock backend */
.demo-note{
  margin-top:18px;padding:13px 15px;border:1px dashed var(--line);border-radius:2px;
  font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--ink-2);
}
.demo-note b{color:var(--ink);letter-spacing:.1em;text-transform:uppercase;font-size:10px;display:block;margin-bottom:6px}

/* password strength */
.meter{display:flex;gap:4px;margin-top:8px}
.meter i{flex:1;height:3px;background:var(--line);border-radius:2px}
.meter i.on{background:var(--accent)}
.meter i.strong{background:var(--good)}

/* ---------- app chrome (directory / profile) ---------- */
.app-bar{
  position:sticky;top:0;z-index:30;
  padding-top:env(safe-area-inset-top,0px);
  background:color-mix(in srgb,var(--ground) 92%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.app-bar-in{display:flex;align-items:center;gap:14px;padding:11px 0}
.app-bar h1{font-size:21px;letter-spacing:-.015em;margin-right:auto}
.icon-btn{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);background:transparent;border-radius:50%;
  cursor:pointer;color:var(--ink);padding:0;
}
.icon-btn:hover{border-color:var(--ink-2)}
.icon-btn svg{width:17px;height:17px}

.search-wrap{padding-bottom:12px}
.search{
  display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:0 16px;
}
.search svg{width:16px;height:16px;color:var(--ink-3);flex:none}
.search input{
  flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
  padding:12px 0;font-family:var(--body);
}
.search input:focus{outline:none}
.search button{
  background:transparent;border:0;color:var(--ink-3);cursor:pointer;padding:6px;
  font-family:var(--mono);font-size:16px;line-height:1;
}

.scroll-chips{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.scroll-chips::-webkit-scrollbar{display:none}
.scroll-chips .chip{white-space:nowrap;flex:none;border-radius:999px}

.count-line{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);padding-block:14px 10px;
}

/* ---------- member list ---------- */
.members{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.member{
  background:var(--surface);border:0;text-align:left;width:100%;
  padding:14px 16px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:13px;align-items:center;cursor:pointer;color:inherit;font:inherit;
}
.member:hover{background:var(--surface-2)}
.member:active{background:var(--surface-2)}
.avatar{
  width:46px;height:46px;flex:none;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;background:var(--deep);color:var(--deep-ink);
  font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.01em;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.lg{width:88px;height:88px;font-size:31px}
.avatar.xl{width:124px;height:124px;font-size:42px}
/* the middle cell must be allowed to shrink or its text shoves the pill out */
.member>span:nth-child(2){min-width:0;display:block}
.m-name{display:block;font-size:15.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-sub{display:block;font-size:13px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.m-right{display:flex;align-items:center;gap:8px}
.pill{
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 8px;border-radius:999px;border:1px solid var(--line);color:var(--ink-3);white-space:nowrap;
}
.pill[data-t="Lifetime"]{color:var(--brass);border-color:color-mix(in srgb,var(--brass) 45%,transparent)}
.pill[data-t="New Member"]{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.pill[data-t="Associate"]{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,transparent)}
.chev{color:var(--ink-3);flex:none}

.no-photo{
  position:absolute;right:-2px;bottom:-2px;width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:2px solid var(--surface);
}
.avatar-wrap{position:relative;flex:none}

/* ---------- member detail sheet ---------- */
dialog.sheet{
  border:0;padding:0;background:transparent;max-width:none;max-height:none;
  width:100%;height:100%;margin:0;
}
dialog.sheet::backdrop{background:rgba(6,14,12,.55);backdrop-filter:blur(3px)}
.sheet-in{
  position:fixed;left:0;right:0;bottom:0;
  max-height:92svh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--ground);
  border-top:1px solid var(--line);
  border-radius:16px 16px 0 0;
  padding:0 var(--gutter) calc(28px + env(safe-area-inset-bottom,0px));
  animation:sheet-up .26s cubic-bezier(.22,.9,.3,1);
}
@keyframes sheet-up{from{transform:translateY(18px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet-in{animation:none}}
.grabber{width:38px;height:4px;border-radius:99px;background:var(--line);margin:10px auto 0}
.sheet-top{display:flex;justify-content:flex-end;padding-top:8px}
.sheet-hero{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding-bottom:6px}
.sheet-hero h2{font-size:26px;letter-spacing:-.02em}
.sheet-hero .m-sub{font-size:14px;white-space:normal}
.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0 4px}
.action{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:14px 8px;border:1px solid var(--line);border-radius:3px;
  background:var(--surface);color:var(--ink);text-decoration:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
}
.action:hover{border-color:var(--accent);color:var(--accent)}
.action svg{width:19px;height:19px}
.action[aria-disabled="true"]{opacity:.4;pointer-events:none}

@media (min-width:700px){
  .sheet-in{
    position:relative;margin:6vh auto;max-width:460px;border-radius:4px;
    border:1px solid var(--line);max-height:88svh;
  }
  .grabber{display:none}
}

/* ---------- profile / photo ---------- */
.profile-hero{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding-block:clamp(24px,5vw,36px)}
.photo-drop{
  border:1.5px dashed var(--line);border-radius:4px;padding:26px 20px;text-align:center;
  background:var(--surface);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:12px;
}
.photo-drop:hover,.photo-drop.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.photo-drop b{font-size:15.5px}
.photo-drop p{font-size:13.5px;color:var(--ink-2);max-width:34ch}
.photo-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.req-badge{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  padding:4px 9px;border-radius:999px;
}

/* ---------- bottom tab bar (phone + standalone) ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:35;
  display:none;
  background:color-mix(in srgb,var(--ground) 94%,transparent);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:6px 0 calc(6px + env(safe-area-inset-bottom,0px));
}
.tabbar ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.tabbar a{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  text-decoration:none;color:var(--ink-3);padding:6px 0;
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
}
.tabbar a svg{width:21px;height:21px}
.tabbar a[aria-current="page"]{color:var(--accent)}
@media (max-width:760px){
  .tabbar{display:block}
  .has-tabbar{padding-bottom:78px}
}

/* ---------- misc ---------- */
.stack{display:flex;flex-direction:column;gap:14px}
.center-narrow{max-width:460px;margin-inline:auto}
.empty-state{text-align:center;padding:52px 20px;color:var(--ink-3)}
.empty-state b{display:block;color:var(--ink);font-size:17px;margin-bottom:6px;font-family:var(--display)}
.spin{
  width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2s}}

/* only show when the app is installed to the home screen */
.standalone-only{display:none}
@media (display-mode:standalone){
  .standalone-only{display:block}
  .browser-only{display:none}
}